javascript - 如何将fillPatternImage居中放置在楔子内部？

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

我想做的是将fillPatternImage设置在楔形的中心。问题是，楔形似乎没有width或height属性。我使用半径和度数将它们围绕轴放置。

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

视觉说明：


可能有人对我如何将fillPatternImage居中放置在楔形中这样使楔形文字居中了有想法？

预先感谢您的帮助和时间。

最佳答案

您可以使用三角函数来计算楔形的三角形部分的宽度/高度：

在此图中，红线是宽度，黄线是高度。

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

关于javascript - 如何将fillPatternImage居中放置在楔子内部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18264209/