我正在为我的工作制作触摸屏绘画游戏。我正在观看如何使用普通html5画布制作一个教程。无论如何,我想将此代码转换为与kinetic js一起使用。我得到了一切转换,但由于某种原因,该行不会像往常一样每次都停止使用mouseup。我似乎无法弄清楚我做错了什么。我觉得它可能与我的绘画功能有关,但我不确定
以下是普通画布的代码:http://jsfiddle.net/mdurchho/zC7c2/
function paint(x, y) {
cx.beginPath();
if (oldx > 0 && oldy > 0) {
cx.moveTo(oldx, oldy);
}
cx.lineTo(x, y);
cx.stroke();
cx.closePath();
oldx = x;
oldy = y;
}
以下是无法正常运行的kineticjs代码:http://jsfiddle.net/mdurchho/G6p4k/
function paint(x, y) {
if (oldx > 0 && oldy > 0) {
var line = new Kinetic.Line({
points: [oldx,oldy, x,y],
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
layer.draw();
}
oldx = x;
oldy = y;
}
任何建议都将不胜感激!
答案 0 :(得分:0)
这不是错误!
当你画画时,你正在舞台上创作线条。 但你只设置
box.on('mouseup', onmouseup, false);
因此,当鼠标在线下时,它不会触发盒鼠标事件。这是正确的。 所以你可以听一下舞台事件而不是盒子事件(纯粹的kineticjs方式):
stage.on('mousedown', onmousedown, false);
stage.on('mouseup', onmouseup, false);
stage.on('mousemove', onmousemove, false);