2

KinetiJsCanvasライブラリで少し実験しようとしています。以下で私が行ったことは-長方形を描くことです。マウスオーバーがあるときはいつでも、特定のポイントの間に線を引く必要があります。

問題は、マウスオーバーが発生したときに線が表示されないことです。

関数が呼び出されるかどうかを確認しようと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);
});
4

1 に答える 1

2

draw()KineticJS では、レイヤーに変更または追加を行った後、効果を表示するためにレイヤーを変更する必要があります

...
layer.add(line);
layer.draw();
于 2012-05-14T05:44:40.273 に答える