0

次のように、linesLayer を含むいくつかのレイヤー (およびステージ) を作成する document.ready 関数があります。

var pointsLayer = new Kinetic.Layer();
var linesLayer = new Kinetic.Layer();
var stage = new Kinetic.Stage("container", 578, 325);

私の document.ready 関数には、キャンバスのクリック機能があります。ここでは、たとえば、次のように新しい円を作成します (画面上のポイント/ドットを表します)。

var circle = new Kinetic.Circle({
    name: "x"+x+"y"+y,
    x: x,
    y: y,
    radius: 5,
    fill: "red",
    stroke: "black",
    strokeWidth: 1
});

その後、私は自分の行を作成します:

var line = new Kinetic.Shape({
    drawFunc: function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.fillStyle = "red";
        context.moveTo(startPoint.x, startPoint.y);
        context.lineTo(endPoint.x, endPoint.y);
        context.closePath();
        context.fill();
        context.stroke();
    }
});

そして、それらをそれぞれのレイヤーに追加します。

linesLayer.add(line);
pointsLayer.add(circle);

それらをステージに追加します。

stage.add(pointsLayer);
stage.add(linesLayer);

今何が起こるかというと、ドット/円を描くと、それらはすべて画面に表示されたままになります。したがって、10 回クリックすると、10 個のドットが表示されます。問題は、これは線を描画しますが、画面上に以前のすべての線を残すのではなく、2 つの点の間の最新の線である毎回 1 行だけを描画することです。レイヤーにそれらを追加していて、ラインレイヤーの前の行で何もしていないので、なぜこれが起こっているのですか?

したがって、基本的には、円を必要に応じてポイントレイヤーに追加し、以前に追加した要素はそのままにしますが、線レイヤーに線を追加すると、線レイヤーの以前のすべての要素が消えますか?

編集:このコードで修正しましたが、なぜこれが機能するのか不明です。

            // Create line
            var line = new Kinetic.Shape({
                drawFunc: function(){
                    var context = this.getContext();
                    context.beginPath();
                    context.moveTo(prevPoint.x, prevPoint.y);
                    context.lineTo(x, y);
                    context.closePath();
                    this.fillStroke();
                },
                stroke: "orange",
                name: "x"+x+"y"+y+"nr"+nr_coords,
                strokeWidth: 2
            });
4

1 に答える 1

2

まず、最初の投稿と 2 番目の投稿で異なる変数を使用しています。最初の投稿では、startPoint オブジェクトと endPoint オブジェクトを使用しています。2 番目の投稿では、prevPoint オブジェクトを使用しています。問題は関連していたと思いますが、これらの変数が設定されていました（コードは表示されていません）

于 2012-03-14T00:24:36.313 に答える