如何将fillPatternImage居中楔入？

【问题标题】：How to center fillPatternImage inside wedge?如何将fillPatternImage居中楔入？
【发布时间】：2013-08-16 00:55:36
【问题描述】：

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

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

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

视觉解释：

可能有人知道我如何将 fillPatternImage 居中在楔形内部，以便楔形看起来使文本居中？

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

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案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);
  }

【讨论】：

效果很好，markE。谢谢。对于完美的文本，我现在需要的只是正确的旋转度数。所有文本元素都有不同的长度，所以它们都应该有不同的旋转度数。有什么想法吗？