Kinetic.js绘制楔形文字（带旋转）

昨天刚刚开始使用Kinetic.js。我想在楔子内部画一些文字（标签），以便它相对于楔子的角度旋转放置在楔子内部。Kinetic.js绘制楔形文字（带旋转）

像这样：

enter image description here

这里是我的代码：

var numSegments = 5; // Number of wedges in circle 

var endPos = 0; 

//Center of the div container 

var center = document.getElementById('canvas_container').offsetWidth * 0.5; 
var centerY = document.getElementById('canvas_container').offsetHeight * 0.5; 

for (var i = 0; i < numSegments; ++i) { 

     //Wedge + corresponding label stored in their own group 
    var group = new Kinetic.Group(); 

    var wedge = new Kinetic.Wedge({ 
     radius: center, 
     x: center, 
     y: centerY, 
     fill: colors[i], 
     stroke: '#aaaaff', 
     strokeWidth: 2, 
     angleDeg: 360/numSegments, 
     rotationDeg: endPos,    
    }); 

    var label = new Kinetic.Label({ 

     x : wedge.getX(), 
     y : wedge.getY(), 

        //The rotation value is where I assume I'm going wrong, this 
        //Is one of many values i've tried. 
     rotation : (endPos == 0) ? (360/numSegments) * 0.5 : endPos 
    }); 


    label.add(new Kinetic.Text({ 

     text : titles[i], 
     fontFamily: 'Calibri', 
     fontSize: 26, 
     fill : 'white', 
     align: 'center', 
     listening: false 
    })); 

    group.add(wedge); 
    group.add(label); 
    WedgeLayer.add(group); 


    endPos += 360/numSegments; 
}

我已经打了这个南墙，我期待任何人分享任何深入了解如何实现期望的结果..

到目前为止，上述结果正在产生这种结果：

enter image description here

任何帮助将不胜感激，欢呼声。

来源

2014-05-13 Lee Brindley

演示：http://jsfiddle.net/m1erickson/fu5LP/

enter image description here

您计算文本偏移和旋转角度是这样的：

计算文本旋转角度

跟踪每个新积累的角度楔你添加并使用该accum。设置文本角度的角度。

调整各种累积角度的角度有助于防止文本出现颠倒。

如果累积角为90 & 270度之间然后将文本角度随着累积角减去180
如果累积角为90 <或> 270然后将文本角度累积的角度。

设置文本偏移

偏移取决于楔形的半径。

但同样的偏移基于累积角

调整如果累积角为90度之间& 270然后将文本OFFSETX设定为约楔形半径减去10.
如果累计角度为< 90或> 270，则将文本偏移设置为大约半径的负半径。

示例代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    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({ 
      x: cx, 
      y: cy, 
      radius: wedgeRadius, 
      angleDeg: angle, 
      stroke: 'gray', 
      strokeWidth: 1, 
      rotationDeg:-accumAngle+angle/2 
     }); 
     layer.add(wedge); 
     wedge.moveToBottom(); 

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


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

来源

2014-05-13 18:38:57 markE

谢谢您的回复！在你的小提琴中，你是否有任何想法，为什么当你将楔的填充值设置为任何颜色，比如说黑色时，一些文本被绘制在楔子后面？ –

这有点奇怪 - 不应该发生！作为临时解决方法，将所有楔块发送到索引顺序的底部：wedge.moveToBottom（）;请参阅修订小提琴：http：//jsfiddle.net/m1erickson/fu5LP/ – markE

再次为回应干杯，并修复！是的，一段时间以来，我一直在困惑，为什么它会那样做。 –

Kinetic.js绘制楔形文字（带旋转）

回答

相关问题