如何在KineticJS Wedge中垂直居中文本？

我有下面的代碼：如何在KineticJS Wedge中垂直居中文本？

var text = new Kinetic.Text({ 
    text: carNames, 
    fontFamily: 'Calibri', 
    fontSize: 17, 
    fill: 'black', 
    align: 'center' 
}); 
text.toImage({ 
    width: text.getWidth(), 
    height: text.getHeight(), 
    callback: function (img) { 
     var cachedText = new Kinetic.Image({ 
      image: img, 
      x: 180, 
      y: 0 
     }); 
     wedge.add(cachedText); 
     layer.draw(); 
    } 
});

將會產生楔子和文字看起來像這樣：

enter image description here

但我需要的文本楔形內爲中心，像這樣：

enter image description here

有誰知道的方式來achiev這是嗎？我已經嘗試了幾件事，但我無法像第二張圖片那樣獲得文本對齊。

在此先感謝您的麻煩。它使用的是文本做

來源

2013-12-18 Yushell

一種方式在組合的偏移與文本的rotationDeg：

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

enter image description here

這裏是代碼：

<!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-v4.7.2.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=120; 
    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); 

    if(accumAngle>90 && accumAngle<270){ 
     var offset=[wedgeRadius-10,7]; 
     var textAngle=accumAngle-180; 
    }else{ 
     var offset=[-50,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>

來源

2013-12-18 21:27:09 markE

再次感謝馬克。你已經設法讓我再次走出泡菜。順便問一下，有沒有辦法讓我的LinkedIn個人資料或電子郵件？如果你沒有問題，我想保持聯繫。 – Yushell

更新：從最新的KineticJS版本開始，offset被格式化爲「offset：{x：val，y：val}」而不是數組 –

如何在KineticJS Wedge中垂直居中文本？

回答

相關問題