使用线条绘制拖动后，鼠标上移检测未按预期工作答案

【问题标题】：Mouseup detection not working as expected after drag with line draw使用线条绘制拖动后，鼠标上移检测未按预期工作
【发布时间】：2019-09-06 02:54:36
【问题描述】：

我目前正在使用以下库：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 事件已经执行。

奇怪的是，有时有效，有时无效。事先非常感谢您

新信息：

什么情况是释放点击就行了，我该怎么做才不会出现这种情况呢？

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

【问题讨论】：

我不明白您的代码，但我想知道这是否是您释放鼠标时画布构造的问题。在某些情况下，线条的重绘已经完成，并且在 mouseup 时鼠标下的对象将是线条 - 在其他情况下则不是。
你能用codesanbox在线演示你的问题吗？可能它不会在图像上触发 mouseup，因为此时您在鼠标位置下有一条线。所以该行触发mouseup。
其实问题是鼠标在线上，然后用@mouseup事件在线上进行测试，事件就真的做完了。遇到这样的情况，即鼠标不在线，该如何纠正？

标签： vuejs2 konvajs

【解决方案1】：

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

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

当您开始使用绘制的对象进行 UI 反馈时，发现鼠标事件被绘制的对象劫持对于刚接触它的人来说是一个常见的绊脚点 - 您正在走一条老路！

【讨论】：