javascript - Kinetic.js 文本有时会在设置填充值的形状下绘制

Question

在这个 fiddle 中:http://jsfiddle.net/m1erickson/fu5LP/

绘制了一组楔形，中间带有文本，以在 Canvas 上生成上述图像。

然而，当您设置楔形对象的填充值时，输出相当奇怪:

一些文本值被绘制在楔形的填充下，我不知道为什么。

fiddle 的代码在这里:

var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var cx = 175;
var cy = 175;
var wedgeRadius = 140;
var accumAngle = 0;

var center = new Kinetic.Circle({
x: cx,
y: cy,
radius: 5,
fill: 'red'
});
layer.add(center);

for (var i = 0; i < 12; i++) {
    newTextWedge(30, "Element # " + i);
}

function newTextWedge(angle, text) {

var wedge = new Kinetic.Wedge({
    fill : 'black',
    x: cx,
    y: cy,
    //If I add this fill the above output of hiding text occurs
    //fill: 'black',
    radius: wedgeRadius,
    angleDeg: angle,
    stroke: 'gray',
    strokeWidth: 1,
    rotationDeg: -accumAngle + angle / 2
});
layer.add(wedge);

if (accumAngle > 90 && accumAngle < 270) {
    var offset = {
        x: wedgeRadius - 10,
        y: 7
    };
    var textAngle = accumAngle - 180;
} else {
    var offset = {
        x: -50,
        y: 7
    };
    var textAngle = accumAngle;
}

var text = new Kinetic.Text({
    x: cx,
    y: cy,
    text: text,
    fill: 'red',
    offset: offset,
    rotationDeg: textAngle
});
layer.add(text);

layer.draw();

accumAngle += angle;
}

任何人都可以就为什么会发生这种情况给出任何见解？

Answer 1

逐步调试和观察创建的图表显示了正在发生的事情。渲染楔形层，然后渲染文本层。下一个楔形呈现在最后一个文本层之上。

这是 fiddle 的分支: http://jsfiddle.net/smurphy/UvdWt/

Kinetic Shape 有一个方法 moveToBottom()，您可以调用填充的楔形，将其强制到堆栈的底部。 See documentation

layer.add(wedge);
wedge.moveToBottom();