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

【问题标题】：Kinetic.JS - why does layer order change overwrite my colour?Kinetic.JS - 为什么图层顺序更改会覆盖我的颜色？
【发布时间】：2012-08-09 13:19:02
【问题描述】：

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

Demo - JSBin

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

取消注释我的 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();

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

提前致谢

【问题讨论】：

标签： html canvas layer kineticjs

【解决方案1】：

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

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

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

【讨论】：