KineticJS中的鼠标悬停事件问题

Issue with Mouseover event in KineticJS

本文关键字：事件 问题 悬停 鼠标 KineticJS      更新时间：2023-09-26

我正在尝试对KinetiJs Canvas库进行一些实验。我在下面所做的是 - 绘制一个矩形，每当有鼠标悬停时，我都希望在特定点之间画一条线。

问题是，当鼠标悬停发生时，我没有看到任何行。

我尝试检查 onmousemove 函数是否被调用，并且确实被调用，但没有绘制线条。谁能解释一下为什么？

$(document).ready(function () {
    var stage = new Kinetic.Stage({
        container: "sketchcanvas",
        width: 600,
        height: 600
    });
    var layer = new Kinetic.Layer();
    var rect = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 500,
        height: 500,
        fill: "#00D2FF",
        stroke: "black",
        strokeWidth: 4
    });
    rect.on("mousemove", function () {
        var mousePos = stage.getMousePosition();
        var x = mousePos.x;
        var y = mousePos.y;
        var line = new Kinetic.Line({
            points: [60, 60, 80, 80, 100, 200],
            stroke: "black",
            strokeWidth: 15,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
    });
    layer.add(rect);
    stage.add(layer);
});

在 KineticJS 中，对图层进行更改或添加后，需要draw()图层才能显示效果

...
layer.add(line);
layer.draw();
相关文章：