Kinetic.js 文本有时会在形状下绘制并设置填充值答案

【问题标题】：Kinetic.js Text gets drawn under shape with fill value set sometimesKinetic.js 文本有时会在形状下绘制并设置填充值
【发布时间】：2014-07-01 20:48:11
【问题描述】：

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

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

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

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

小提琴的代码在这里：

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;
}

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

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

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

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

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

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

【讨论】：