Javascript 如何在楔形内居中填充图案图像？

我有几个楔子绕着一个轴旋转，形成一个圆。我正在使用fillPatternImage为每个楔子设置背景。每个图像都是一个中间有文本的空白图像。所有图像与楔块具有相同的宽度，并且比楔块更宽

我想我要做的是将FillPattern图像设置在楔块的中心。问题是，楔块似乎没有“宽度”或“高度”属性。我使用半径和角度围绕轴放置它们

我知道我可以使用fillPatternImageOffset将背景偏移到背景宽度-楔形宽度/2，而不是楔形的0,0。但正如我之前提到的，我没有楔形物的宽度和高度

视觉解释：

有没有人知道我如何将FillPattern图像居中放置在楔形块内，使楔形块的文本居中

提前感谢您的帮助和时间。

您可以使用三角法计算楔块三角形部分的宽度/高度：

在本图中，红线为宽度，黄线为高度

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);
  }

---

这非常有效，马克。谢谢我现在所需要的完美文本是正确的旋转度。所有文本元素都具有不同的长度，因此它们都应该具有不同的旋转度。有什么想法吗？