Kinetic.js 텍스트는이 바이올린에서 가끔

Question

을 설정 채우기 값과 모양에 따라 그려됩니다 : 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; 
} 

누구나 할 수?

Answer 1

단계별로 생성 된 차트를 디버깅하고보고 있으면 진행 상황이 표시됩니다. 쐐기 레이어가 렌더링 된 다음 텍스트 레이어가 렌더링됩니다. 다음 쐐기가 마지막 텍스트 레이어 위에 렌더링됩니다. http://jsfiddle.net/smurphy/UvdWt/

운동 Shape 당신이 스택의 맨 아래에 강제로 채워진 쐐기에 호출 할 수있는 방법 moveToBottom() 있습니다 여기에

는 바이올린의 포크입니다. See documentation

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