我正在尝试对 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);
});