我正在尝试使用 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();
关于javascript - KineticJS 中的 Mouseover 事件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10577967/