如何将wedPatternImage置于wedge中心？

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