如何計算楔子fillPatternImage的rotationDegree？

我有以下圈子，由楔子組成。每個楔子都有一個fillPatternImage。每個fillPatternImage都有一個帶有居中文本的圖像。每個楔塊的文字長短不一。如何計算楔子fillPatternImage的rotationDegree？

問題是我需要給每個fillPatternImage一個旋轉度，以便所有文本都沿着圓的周邊完美對齊。但我不知道什麼旋轉度給每個fillPatternImage。

例如，當我給所有fillPatternImages旋轉度爲95°時，短文本對齊，但長文本變爲彎曲。

我想旋轉度必須是動態的每個fillPatternImage。但我還沒有發現如何。我有楔尺寸，文字寬度等

enter image description here

代碼示例fillPatternImage：

imageObj.src = Caption + ".png"; 
imageObj.onload = function() { 
    nts.setFillPatternImage(imageObj); 
    nts.setFillPatternRotationDeg(95); 
    // nts.setFillPatternOffset(-220, 100); 
    nts.setFillPatternX(radio - 15); 
    nts.setFillPatternY(leftSide); 
    nts.setFillPatternRepeat("no-repeat"); 
    nts.draw(); 
}

任何想法，將有很大的幫助。提前致謝。

來源

2013-08-16 Yushell

想，如果你可以讓它變成一個jsfiddle，以便人們可以修補它。它有助於解決這樣的問題，我認爲 – Shaunak

對不起，項目的一部分是Rails的runnung，因爲圖像是使用RMagick生成的。 JsFiddle需要重構代碼的主要部分。 – Yushell

你的文字是圖像的一部分，還是他們kinetic.Text？如果文本不是圖像的一部分，解決方案更容易。無論哪種方式，您都需要知道字體大小和字體。 – markE

如何計算fillPatternRotation角度動力學楔形

enter image description here

您的文字總是會適當地與本fillPatternRotation動力學楔形旋轉：

fillPatternRotation:Math.PI/2+wedgeAngleDeg*Math.PI/360

哪裏wedgeAngleDeg是提供給wedge.angleDeg的價值：

angleDeg: wedgeAngleDeg

您還需要設置相應的楔形fillPatternOffset，以配合您的文字，圖像

enter image description here

您必須水平偏移fillPattern到文本的中點圖像

假設你的文字上在圖像上水平居中，偏移量爲image.width/2。

fillPatternOffset X is image.width/2

您必須垂直偏移fillPattern以將圖像文本與楔形上的最大寬度對齊。

可以計算出最大的楔形寬度是這樣的：

var textTop=radius*Math.sin(wedgeAngleDeg*Math.PI/180);

所以你fillPatternOffset變爲：

fillPatternOffset: [image.width/2, image.height-textTop],

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/Y53cH/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script> 
    <script defer="defer"> 

     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
     }); 

     var img=new Image(); 
     img.onload=function(){ 
      start(); 
     } 
     img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/testing.png"; 

     function start(){ 

      var layer = new Kinetic.Layer(); 

      var wedgeAngleDeg=60; 
      var radius=100; 
      var textTop=radius*Math.sin(wedgeAngleDeg*Math.PI/180); 

      var wedge = new Kinetic.Wedge({ 
      x: stage.getWidth()/2, 
      y: stage.getHeight()/2, 
      radius: radius, 
      angleDeg: wedgeAngleDeg, 
      fillPatternImage: img, 
      fillPatternOffset: [img.width/2, img.height-textTop], 
      fillPatternRepeat:"no-repeat", 
      fillPatternRotation:Math.PI/2+wedgeAngleDeg*Math.PI/360,  
      stroke: 'black', 
      strokeWidth: 4, 
      rotationDeg: 0 
      }); 
      layer.add(wedge); 

      wedge.setRotationDeg(-45); 

      // add the layer to the stage 
      stage.add(layer); 

     } 
    </script> 
    </body> 
</html>

來源

2013-08-17 05:36:23 markE

你的答案是正確的醫生點了什麼標記。我不能夠感謝你。它仍然是星期天，希望你喜歡它，並有一個美妙的一週。來自墨西哥的問候。 – Yushell

如何計算楔子fillPatternImage的rotationDegree？

回答

相關問題