在使用线条绘制进行拖动后，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");
                    }
    },

问题是，当我在图像上绘制线条并释放click时，不会执行@mouseup事件，因此它不会进入'traceLineaMono‘方法，现在如果我单独在图像上单击，然后释放click，@mouseup事件就已经执行了。

奇怪的是，它有时工作，有时不工作。事前非常感谢你

新信息：

发生的事情是释放点击是在线路上做的，我怎么做才不会发生这种情况呢？

模拟箭头:箭头恰好在直线上

​

​

Answer 1

为了清楚起见，代码使用箭头对象作为UI元素将鼠标按下的指针连接到当前鼠标指针位置。问题是，鼠标释放事件是在箭头对象而不是单声道图像上触发的，因此永远不会触发有关连接检查的逻辑。

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

当您开始使用绘制对象进行UI反馈时，查找要被绘制对象劫持的鼠标事件对于新手来说是一个常见的绊脚点-您正走在一条老生常谈的道路上！