Kinetic.js文本在形状下绘制，有时设置填充值

Question

在这个小提琴中：http://jsfiddle.net/m1erickson/fu5LP/

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

但是，当您设置wedge对象的填充值时，输出相当奇怪：

有些文字值是在楔形填充下绘制的，我不知道为什么。

小提琴的代码在这里：

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

调试和观看逐步创建的图表可以显示正在发生的事情。渲染楔形图层，然后渲染文本图层。下一个楔形渲染在最后一个文本层的顶部。

这是小提琴的一个分支： http://jsfiddle.net/smurphy/UvdWt/

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

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