1

私は HTML5 Canvas と KineticJS を使用するのにまったく慣れていないので、これが私の明らかなエラーである場合はご容赦ください。

私の問題は、シェイプで構成されたグループを使用していることです。Shapes は描画マジックを行う drawFunc を使用します。すべての良いもの。ただし、 Shape 呼び出しで行った設定が「グローバル」コンテキスト設定をオーバーライドしているように見えることに気付きました。これは、標準の「KineticJS ドラッグ アンド ドロップ a グループ」デモにいくつかのクロス (形状) を追加する、私が作成したフィドルによって最もよく示されます。

  // ----------------------------------------------------------[ my bit starts ]
        var tmp_x = i * 30 + 100
        var tmp_y = i * 30 + 40
        var shape = new Kinetic.Shape({

            drawFunc: function(context) {

                context.moveTo(tmp_x-10, tmp_y);
                context.lineTo(tmp_x + 10, tmp_y);
                context.moveTo(tmp_x, tmp_y - 10);
                context.lineTo(tmp_x, tmp_y + 10);

                this.fill(context);
                this.stroke(context);
            } ,
            fill: "#0FD2FF",
            stroke: "orange"
        });
        group.add(shape);
        // ----------------------------------------------------------[ my bit ends ]

        var box = new Kinetic.Rect({
            x: i * 30 + 210,
            y: i * 18 + 40,
            width: 100,
            height: 50,
            name: colors[i],
            fill: colors[i],
            stroke: 'black',
            strokeWidth: 4
        });

        group.add(box);

最後のクロス (形状) の後に作成された最後のものとは別に、色付きのボックスの設定の形状スタンプで行われたストロークと塗りつぶしの設定に気付くでしょう。

グループがレンダリングされたときにのみ処理が行われるため、ある種の遅い評価のように感じます。

誰かが私が間違っていることについての手がかりを教えてもらえますか?

4

1 に答える 1

6

コンテキストはグローバルであるため、設定を適用すると、コンテキストを使用して描画するすべての形状に適用されます。

drawFunc 内で、他の への呼び出しの前後で と を呼び出してcontext.beginPath()、これが新しく、他の形状とは別の形状であることを示す必要があります。context.closePath()context

したがって、形状のコードは次のようになります。

var shape = new Kinetic.Shape({
    drawFunc: function(context) {
        context.beginPath();
        context.moveTo(tmp_x-10, tmp_y);
        context.lineTo(tmp_x + 10, tmp_y);
        context.moveTo(tmp_x, tmp_y - 10);
        context.lineTo(tmp_x, tmp_y + 10);
        context.closePath();

        this.fill(context);
        this.stroke(context);
    },
    fill: "#0FD2FF",
    stroke: "orange"
});

これにより、コンテキスト設定が他の図形に漏れるのを防ぎます。

于 2012-11-16T13:17:41.403 に答える