웨지의 fillPatternImage에 대해 rotationDegree를 계산하는 방법은 무엇입니까?

나는 다음과 같은 쐐기 모양의 서클을 가지고있다. 각 쐐기에는 fillPatternImage이 있습니다. 각 fillPatternImage에는 가운데 맞춤 텍스트가있는 이미지가 있습니다. 텍스트는 각 쐐기마다 길이가 다릅니다.웨지의 fillPatternImage에 대해 rotationDegree를 계산하는 방법은 무엇입니까?

문제는 각각의 텍스트를 원의 둘레를 따라 완벽하게 정렬하도록 각각 fillPatternImage 회전 각도로 지정해야합니다. 하지만 각 회전 각도에 어떤 단서를 주는지 전혀 알지 못합니다. fillPatternImage. 나는 모든 fillPatternImages 95 °의 회전 정도를 줄 때 예를 들어

는 짧은 텍스트는 잘 정렬하지만 긴 텍스트는 비뚤어진 판명.

각 회전 각도가 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(); 
}

어떤 아이디어가 큰 도움이 될 것입니다 : 나는 쐐기 치수, 텍스트 폭 등 fillPatternImage에 대한

enter image description here

코드 예제가 있습니다. 미리 감사드립니다.

출처

2013-08-16 Yushell

는 경우 것 사람들이 그것으로 땜질 할 수 있도록 그것에서 jsfiddle을 만들 수 있습니다. 이러한 문제를 해결하는 데 도움이됩니다. – Shaunak

죄송합니다. 이미지가 RMagick으로 생성되기 때문에 프로젝트의 일부가 Rails에서 실행됩니다. JsFiddle은 코드의 주요 부분을 리팩토링해야합니다. – Yushell

귀하의 텍스트가 이미지의 일부분입니까, 아니면 kinetic.Text입니까? 텍스트가 이미지의 일부가 아닌 경우 솔루션이 더 쉽습니다. 어느 쪽이든, 당신은 글꼴 크기와 글꼴 얼굴을 알아야합니다. – markE

키네틱 웨지

enter image description here

당신의 텍스트는 항상 적절하게이 fillPatternRotation와 운동 쐐기 회전됩니다

에 대한 fillPatternRotation 각도를 계산하는 방법 :

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

wedgeAngleDeg은 어디 wedge.angleDeg에 제공된 값 :

angleDeg: wedgeAngleDeg

는 또한 당신은 수평 텍스트를 가정하면 이미지

에 텍스트의 중간 점에 fillPattern을 상쇄해야한다

enter image description here

텍스트 이미지에 맞게 적절한 쐐기 fillPatternOffset을 설정해야 가로로 이미지의 가운데에 위치하며 오프셋은 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를 계산하는 방법은 무엇입니까?

답변

관련 문제