0

仕事用のタッチスクリーンペイントゲームを作成中です。プレーンなhtml5キャンバスを使用して作成する方法に関するチュートリアルを見ていました。とにかく、このコードを kinetic js で動作するように変換したかったのです。私はすべてを変換しましたが、何らかの理由で、マウスアップ時に毎回線の描画が停止しません。私は自分が間違っていることを理解できないようです。ペイント機能と関係があるように感じますが、よくわかりません

正常に動作するプレーン キャンバスのコードは次のとおりです: 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);

したがって、マウスが線の下にある場合、ボックスのマウスアップイベントはトリガーされません。そして、これは正しいです。したがって、ボックス イベントの代わりにステージ イベントをリッスンできます (純粋な kineticjs の方法):

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 に答える