如何计算楔形的fillPatternImage的rotationDegree？答案

【问题标题】：How to calculate rotationDegree for fillPatternImage of wedges?如何计算楔形的fillPatternImage的rotationDegree？
【发布时间】：2023-03-05 18:21:02
【问题描述】：

我有以下圆圈，由楔形组成。每个楔形都有一个fillPatternImage。每个 fillPatternImage 都有一个带有居中文本的图像。每个楔形的文本长度各不相同。

问题是我需要给每个 fillPatternImage 一个旋转度数，以便所有文本都沿着圆的周边完美对齐。但我不知道每个 fillPatternImage 的旋转度数。

例如，当我将所有 fillPatternImages 旋转角度设为 95° 时，短文本对齐良好，但长文本会弯曲。

我认为每个fillPatternImage 的旋转度数必须是动态的。但我还没有发现如何。我有楔形尺寸、文字宽度等。

fillPatternImage 的代码示例：

imageObj.src = Caption + ".png";
imageObj.onload = function () {
    nts.setFillPatternImage(imageObj);
    nts.setFillPatternRotationDeg(95);
    // nts.setFillPatternOffset(-220, 100);
    nts.setFillPatternX(radio - 15);
    nts.setFillPatternY(leftSide);
    nts.setFillPatternRepeat("no-repeat");
    nts.draw();
}

任何想法都会有很大帮助。提前致谢。

【问题讨论】：

如果你能用它制作一个 jsfiddle 以便人们可以修补它。我认为它有助于解决这些问题
抱歉，部分项目在 Rails 上运行，因为图像是使用 RMagick 生成的。 JsFiddle 需要重构代码的主要部分。
您的文本是图像的一部分还是动态文本？如果文本不是图像的一部分，则解决方案会更容易。无论哪种方式，您都需要知道字体大小和字体。
@markE：文本部分是图像的一部分。我确实知道字体大小和字体，但我不知道如何使用动态文本实现上述效果。
我会回到这个仍未解决的问题：stackoverflow.com/questions/16826393/…

标签： javascript canvas geometry kineticjs trigonometry

【解决方案1】：

如何计算 Kinetic Wedge 的 fillPatternRotation 角度

您的文本将始终使用此 fillPatternRotation 在动力学楔形中适当旋转：

  fillPatternRotation:Math.PI/2+wedgeAngleDeg*Math.PI/360

其中wedgeAngleDeg 是提供给wedge.angleDeg 的值：

  angleDeg: wedgeAngleDeg

您还需要设置适当的楔形 fillPatternOffset 以匹配您的文本图像

您必须将 fillPattern 水平偏移到图像上文本的中点

假设您的文本在图像上水平居中，则偏移量为 image.width/2。

 fillPatternOffset X is image.width/2

您必须垂直偏移 fillPattern 以将图像文本与楔形上的最大宽度对齐。

你可以这样计算最大的楔形宽度：

 var textTop=radius*Math.sin(wedgeAngleDeg*Math.PI/180);

所以你的 fillPatternOffset 变成：

 fillPatternOffset: [image.width/2, image.height-textTop],

这是代码和小提琴：http://jsfiddle.net/m1erickson/Y53cH/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
    <script defer="defer">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
      });

      var img=new Image();
      img.onload=function(){
          start();
      }
      img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/testing.png";

      function start(){

          var layer = new Kinetic.Layer();

          var wedgeAngleDeg=60;
          var radius=100;
          var textTop=radius*Math.sin(wedgeAngleDeg*Math.PI/180);

          var wedge = new Kinetic.Wedge({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            radius: radius,
            angleDeg: wedgeAngleDeg,
            fillPatternImage: img,
            fillPatternOffset: [img.width/2, img.height-textTop],
            fillPatternRepeat:"no-repeat", 
            fillPatternRotation:Math.PI/2+wedgeAngleDeg*Math.PI/360,       
            stroke: 'black',
            strokeWidth: 4,
            rotationDeg: 0
          });
          layer.add(wedge);

          wedge.setRotationDeg(-45);

          // add the layer to the stage
          stage.add(layer);

      }
    </script>
  </body>
</html>

【讨论】：

您的答案正是医生所要求的markE。我不能感谢你。现在仍然是星期天，希望你喜欢它，并有一个美好的一周。来自墨西哥的问候。