0

我目前正在玩 Kinetic.JS。我画了一个相当粗糙的 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();

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

提前致谢

4

1 回答 1

1

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

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

通过添加beginPath()命令，您告诉上下文您实际上并没有添加到先前的路径，而是绘制了一个新路径。这也是this.fill()用红色填充先前形状的原因，因为在您的示例中，上下文在尝试填充它时仍然指的是圆盘

于 2012-08-13T14:19:44.573 回答