0

私は現在Kinetic.JSで遊んでいます。船体（赤）と円盤（灰色）の2つの部分でかなり粗いUFOのような形を描きました。

デモ-JSBin

質問：後で船体がディスクの上にくるように形状の順序を調整すると、ディスクが奇妙に灰色から船体の赤に変わるのはなぜですか？

moveToTop()JSBinの下部にある行のコメントを外して、意味を確認します。関連する（要約された）コードは次のとおりです。

//ship hull
var hull = new Kinetic.Shape({
    drawFunc: function(ctx) {
        ctx.arc(game_dims.w / 2, game_dims.h * 0.6, game_dims.h * 0.45, 0, Math.PI, true);
        this.fill(ctx);
    },
    fill: 'red'
});

//ship disc
var disc = new Kinetic.Circle({
    x: game_dims.w / 2,
    y: game_dims.h * 0.6,
    radius: {x: game_dims.w * 0.45, y: 30},
    fill: '#888'
});

//draw
layer.add(hull);
layer.add(disc);
stage.add(layer);

//post-production
hull.moveToTop(); // <-- weirdness - changes disc colour!?
layer.draw();

2つの図形を逆の順序で描画して目的の順序を取得できることは承知していますが、この質問ではそれが必要ではありません。描画後の順序の再配置に関心があります。

前もって感謝します

4

1 に答える 1

1

ハルの描画関数は、新しいパスを描画していることをコンテキストに伝える必要があります。

function(ctx) {
        ctx.beginPath();
        ctx.arc(...);
        this.fill(ctx);
}

コマンドを追加するbeginPath()ことで、実際には前のパスに追加するのではなく、代わりに新しいパスを描画することをコンテキストに伝えます。これはthis.fill()、前の形状を赤で塗りつぶすものでもあります。これは、この例では、塗りつぶそうとしたときにコンテキストがまだディスクを参照しているためです。

于 2012-08-13T14:19:44.573 に答える