鼠标拖动绘制线条后，鼠标检测未按预期工作

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点连接到当前鼠标指针位置。问题在于，鼠标向上事件是在箭头对象而不是单色图像上触发的，因此从不触发有关连接检查的逻辑。