画布在鼠标悬停时触发额外事件

Question

在我的应用程序中，我将图像绘制到画布上，然后为标签添加圆圈和文本。我将额外的绘图代码移至 drawImage 的 load 方法，并发现将鼠标移到画布上时会重复调用相同的代码。我尝试有选择地注释掉不同的块以查明问题，但并没有真正缩小范围。

这个块是绘制图像的主要代码。许多变量是不言自明的。使用的不同 ID 用于数据库标识。我注意到在画布上移动鼠标时会重复打印“回调”。

canvasObject.drawImage({
        layer: true,
        name: 'image',
        source: imageSize.url,
        x: (600-imageSize.width)/2,
        y: 0,
        fromCenter: false,
        data: {
            id : image.id
        },
        load: function() {
            // now draw the labels and stuff on top
            console.log("callback")
            for (var imageLabelIndex in image.image_label_locations) {
                var labelLocation = image.image_label_locations[imageLabelIndex]
                console.log("draw " + imageLabelIndex)

                drawLabelLine(canvasObject, {
                    index : imageLabelIndex,
                    from : {
                        x : labelLocation.location_x,
                        y : labelLocation.location_y
                    },
                    to : {
                        x : labelLocation.label.location_x,
                        y : labelLocation.label.location_y
                    }
                })
                drawSmallLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.location_x,
                    y : labelLocation.location_y,
                    id : labelLocation.id
                })
                drawLargeLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.label.location_x,
                    y : labelLocation.label.location_y,
                    id : labelLocation.label.id
                })
            }
        },
        click: function(layer) {
            console.log("click")

            // check whether the mouse is on an existing object
            var canvasObject = $(layer.canvas)
            var parentOffset = canvasObject.offset();
            var canvasWidth = canvasObject.attr("width")
            var space = 24

            mouseDownPosition = {"x" : layer.eventX, "y" : layer.eventY }

            var labelPosition = { "x" : (mouseDownPosition.x < canvasWidth/2) ? space : canvasWidth-space, "y" : mouseDownPosition.y }
            drawLabelLine(canvasObject, {
                index : countAnswers(),
                from: {
                    x : labelPosition.x,
                    y : labelPosition.y
                },
                to: {
                    x : mouseDownPosition.x,
                    y : mouseDownPosition.y
                }
            })

            drawSmallLabel(canvasObject, {
                index : countAnswers(),
                x : mouseDownPosition.x,
                y : mouseDownPosition.y
            })

            drawLargeLabel(canvasObject, {
                index : countAnswers(),
                x : labelPosition.x,
                y : labelPosition.y
            })

            // also add an answer to the question page
            addLabelAnswer(countAnswers(), mouseDownPosition, labelPosition)
        }
    })

Answer 1

代码在您移动鼠标时运行，因为 jCanvas 正在重新绘制 mousemove 上的画布。这是由于存在可拖动层或在某处定义了mousemove 回调的层。此外，无论何时绘制或重绘图像（而不仅仅是最初绘制图像时），load() 回调都会运行。

修复其实很简单：

在图像层的data 对象中存储一个布尔属性（最初设置为false）。然后，在您的load() 回调中，将您的代码包装在if 语句中，该语句检查属性的值是否为false。如果是这样，请将其值设置为 true 并运行代码。如果没有，那么您知道回调已经运行，因此您什么也不做。

canvasObject.drawImage({
    layer: true,
    name: 'image',
    source: imageSize.url,
    x: (600-imageSize.width)/2,
    y: 0,
    fromCenter: false,
    data: {
        id : image.id,
        loaded: false
    },
    load: function(layer) {
        if (layer.data.loaded === false) {
            layer.data.loaded = true;
            // now draw the labels and stuff on top
            console.log("callback")
            for (var imageLabelIndex in image.image_label_locations) {
                var labelLocation = image.image_label_locations[imageLabelIndex]
                console.log("draw " + imageLabelIndex)

                drawLabelLine(canvasObject, {
                    index : imageLabelIndex,
                    from : {
                        x : labelLocation.location_x,
                        y : labelLocation.location_y
                    },
                    to : {
                        x : labelLocation.label.location_x,
                        y : labelLocation.label.location_y
                    }
                })
                drawSmallLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.location_x,
                    y : labelLocation.location_y,
                    id : labelLocation.id
                })
                drawLargeLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.label.location_x,
                    y : labelLocation.label.location_y,
                    id : labelLocation.label.id
                })
            }
        }
    },
    click: function(layer) {
        console.log("click")

        // check whether the mouse is on an existing object
        var canvasObject = $(layer.canvas)
        var parentOffset = canvasObject.offset();
        var canvasWidth = canvasObject.attr("width")
        var space = 24

        mouseDownPosition = {"x" : layer.eventX, "y" : layer.eventY }

        var labelPosition = { "x" : (mouseDownPosition.x < canvasWidth/2) ? space : canvasWidth-space, "y" : mouseDownPosition.y }
        drawLabelLine(canvasObject, {
            index : countAnswers(),
            from: {
                x : labelPosition.x,
                y : labelPosition.y
            },
            to: {
                x : mouseDownPosition.x,
                y : mouseDownPosition.y
            }
        })

        drawSmallLabel(canvasObject, {
            index : countAnswers(),
            x : mouseDownPosition.x,
            y : mouseDownPosition.y
        })

        drawLargeLabel(canvasObject, {
            index : countAnswers(),
            x : labelPosition.x,
            y : labelPosition.y
        })

        // also add an answer to the question page
        addLabelAnswer(countAnswers(), mouseDownPosition, labelPosition)
    }
})