Question

我正在玩Kinetic.JS。我画了一个相当粗糙的UFO形状，分为两部分：船体（红色）和圆盘（灰色）。

问题：为什么我后来安排形状排序以便船体在光盘上方，光盘奇怪地从灰色变为船体的红色？

取消注释我的JSBin底部的moveToTop()行，看看我的意思。这是相关的（精简的）代码。

//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();

我知道我可以按相反的顺序绘制两个形状以获得所需的顺序，但这不是我想要的这个问题 - 我对绘制后的顺序重新排列感兴趣。

提前致谢

Answer 1

船体的绘制功能需要告诉上下文它正在绘制一条新路径：

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

通过添加beginPath()命令，您告诉上下文您实际上并未添加到上一个路径，而是绘制一个新路径。这也是this.fill()用红色填充前一个形状的原因，因为在你的例子中，当它试图填充它时，上下文仍指向光盘

Kinetic.JS - 为什么图层顺序改变会覆盖我的颜色？

1 个答案: