쐐기 내부에서 fillPatternImage를 가운데에 배치하는 방법은 무엇입니까?

Question

나는 축을 중심으로 회전하는 여러 개의 쐐기를 가지고 원을 형성합니다. fillPatternImage를 사용하여 각 쐐기에 대한 배경을 설정합니다. 각 이미지는 가운데에 텍스트가있는 빈 이미지입니다. 모든 이미지는 웨지와 동일하고 웨지보다 넓습니다.

내가하려는 것은 쐐기 중심에 fillPatternImage를 설정하는 것입니다. 문제는 쐐기에 너비 또는 높이 특성이없는 것입니다. 반경과 각도를 사용하여 축 주위에 배치합니다.

필자는 배경을 0,0의 쐐기 대신에 (배경 너비 - 쐐기 너비)/2)으로 상쇄하기 위해 fillPatternImageOffset을 사용할 수 있다는 것을 알고 있습니다. 그러나 전에 언급했듯이 웨지에는 너비와 높이가 없습니다.

비주얼 설명 :이

누군가가 쐐기를 보인다 그래서 내가 쐐기 내부의 fillPatternImage의 중심을 수있는 방법에 대한 아이디어를 가지고 할 수 있음은 텍스트가 중심습니까?

도움과 시간을 미리 보내 주셔서 감사합니다.

Answer 1

당신은 쐐기의 삼각형 부분의 너비/높이 계산하는 삼각 함수를 사용할 수 있습니다이 그림에서

은 빨간색 선은 폭과 노란 선은 높이입니다.

필요한 경우

function calcWedgeDimensions(x,y,radius,angleDeg){ 
    var angleRad=angleDeg*Math.PI/180; 
    var r=-(angleRad/2+Math.PI/2); 
    var x1=x+radius*Math.cos(-angleRad/2-Math.PI/2); 
    var y1=y+radius*Math.sin(r); 
    var x2=x+radius*Math.cos(+angleRad/2-Math.PI/2); 
    return({width:x2-x1,height:y-y1}); 
} 

, 당신이 그것을 가운데에 텍스트의 폭을 얻을 수 context.measureText를 사용할 수 있습니다 마르크 완벽하게 작동

function calcTextWidth(text,font){ 
     context.font = font; 
     var metrics = context.measureText(text); 
     return(metrics.width); 
    }