0

我正在为我的工作制作触摸屏绘画游戏。我正在观看有关如何使用普通 html5 画布制作的教程。无论如何，我想将此代码转换为与动力学 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;
}

任何建议将不胜感激！

4

1 回答 1

0

这不是错误！

当你绘画时，你是在舞台上创建线条。但你只设置

box.on('mouseup', onmouseup, false);

所以当鼠标下线时，它不会触发框 mouseup 事件。这是正确的。所以你可以听舞台事件而不是盒子事件（纯动力学方式）：

stage.on('mousedown', onmousedown, false);
stage.on('mouseup', onmouseup, false);
stage.on('mousemove', onmousemove, false);

http://jsfiddle.net/lavrton/J2JsJ/

于 2013-11-09T03:23:27.090 回答