使用画线拖动后，Mouseup 检测无法按预期工作

Question

我目前正在使用以下库：https://konvajs.org/docs/vue/

项目主要是进行下面的测试，就是把文字和图片画一条线连接起来

为此我有以下代码：

<v-stage 
            :config="configKonva" 
            ref="stage" 
            @mousemove="moviendoLinea" 
            @mouseup="eliminarLinea"
            class="configkonva"
            style="position: fixed !important;"
        >
            <v-layer ref="layer">
                <v-image 
                 :config="{ image: image_mono, draggable: false, width: 70, height: 70, x: 130, y: 0}"
                 @mouseup="trazarLineaMono"
                 ref="imgMono"
                ></v-image>
                <v-line :config="configLine"></v-line>
                <v-line :config="configLineTxtMono"></v-line>
                <v-line :config="configLineTxtMoto"></v-line>
                <v-line :config="configLineTxtPaleta"></v-line>
                <v-line :config="configLineTxtPelota"></v-line>
                <v-image
                 :config="{image: img_text_mono, x: 125, y: 170}"
                 ref="monoRef" 
                 @mousedown="iniciarLineaMono"
                >
                </v-image>
            </v-layer>
        </v-stage>

iniciarLineaMono(){
                let vm = this;
                console.log("CREANDO LINEA MONO");
                vm.ir_generando_linea_mono = true;
                const mousePos = this.$refs.stage.getStage().getPointerPosition();
                vm.configLineTxtMono = new Konva.Arrow({
                    points: [mousePos.x, mousePos.y, mousePos.x, mousePos.y],
                    pointerLength: 10,
                    pointerWidth: 10,
                    fill: 'blue',
                    stroke: 'blue',
                    strokeWidth: 4,
                    draggable: false
                });
            },

    trazarLineaMano(event){
                    let vm = this;
                    console.log("TRAZANDO LINEA MANO");
                    vm.$refs.imgMano.getNode().off("mouseup");
                    vm.mano_seleccionado = true; //La linea ha llegado a tocar la imagen 'mano' por tal razon es true, ha sido seleccionada.
                    if(vm.ir_generando_linea) {
                        console.log("HAND TEXT IS CONNECTED WITH HAND PICTURE, CORRECT
");
                        vm.ir_generando_linea = false;
                        vm.$refs.manoRef.getNode().off("mousedown");
                        vm.puntuacion.mano = 1;
                    }
                    else if(vm.ir_generando_linea_mono){
                        console.log("MONKEY TEXT IS CONNECTING WITH HAND PICTURE
");
                        vm.ir_generando_linea_mono = false;
                        vm.$refs.monoRef.getNode().off("mousedown");
                    }
                    else if(vm.ir_generando_linea_moto){
                        console.log("MOTORCYCLE TEXT IS CONNECTING WITH HAND PICTURE
");
                        vm.ir_generando_linea_moto = false;
                        vm.$refs.motoRef.getNode().off("mousedown");
                    }
    },

问题是，当我画线并在图像上并释放点击时，不会执行@mouseup 事件，因此它不会进入方法'traceLineaMono'，现在如果我一个人在图像上单击，然后我释放单击，这样 @mouseup 事件就已经执行了。

奇怪的是有时能用有时不能用。预先非常感谢

新信息：

什么情况是松开点击就行了，请问如何才能不出现这种情况呢？

模拟箭头：箭头正好在直线上

Answer 1

所以为了澄清，代码使用箭头对象作为 UI 元素将 mousedown 点连接到当前鼠标指针位置。问题是鼠标弹起事件是在箭头对象上触发的，而不是在单色图像上触发的，因此永远不会触发有关连接检查的逻辑。

答案是停止监听事件的线路。请参阅 konva 文档中的 this example。在纯 JS 中禁用事件监听的基本方法是 object.listening(false)。您可能需要稍微适应 Vue。

当您开始使用绘制对象进行 UI 反馈时，发现鼠标事件被绘制对象劫持是新手的常见绊脚石 - 您正在走一条老路！

使用画线拖动后，Mouseup 检测无法按预期工作

Mouseup detection not working as expected after drag with line draw

konvajs

vuejs2