1

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

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

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

视觉解释： 在此处输入图像描述

可能有人知道我如何将 fillPatternImage 居中在楔形内部，因此楔形似乎使文本居中？

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

4

1 回答 1

0

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

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

在此处输入图像描述

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);
  }
于 2013-08-16T05:16:56.970 回答