如何在楔子內部填充fillPatternImage？

Question

我有幾個楔子圍繞一個軸旋轉，形成一個圓。我使用fillPatternImage爲每個楔子設置背景。每張圖片都是中間有文字的空白圖片。所有的圖像都與楔子相同並且寬於楔子。

我想要做的是將fillPatternImage設置在楔形的中心。問題是，楔子似乎沒有寬度或高度屬性。我使用半徑和度數將它們放置在軸上。

我知道我可以使用fillPatternImageOffset來將背景偏移到（（背景寬度 - 楔形寬度）/ 2），而不是0,0的楔形。但正如我之前提到的，我沒有楔子的寬度和高度。

視覺解釋：

也許有人有我怎麼可能居中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); 
    }