Javascript 如何计算楔形填充图案图像的旋转度？_Javascript_Canvas_Geometry_Kineticjs_Trigonometry

Javascript 如何计算楔形填充图案图像的旋转度？

javascript canvas geometry

Javascript 如何计算楔形填充图案图像的旋转度？,javascript,canvas,geometry,kineticjs,trigonometry,Javascript,Canvas,Geometry,Kineticjs,Trigonometry,我有下面的圆圈，是用楔子做成的。每个楔块都有一个填充图案图像。每个fillPatternImage都有一个文本居中的图像。每个楔块的文本长度不同问题是我需要给每个fillPatternImage指定一个旋转度，以便所有文本沿圆的周长完美对齐。但我不知道每个图像的旋转角度例如，当我将所有FillPattern图像的旋转度设置为95°时，短文本对齐得很好，但长文本会弯曲我认为每个图像的旋转度必须是动态的。但我还没发现是怎么回事。我有楔形尺寸、文本宽度等 fillPatternImage的代码

我有下面的圆圈，是用楔子做成的。每个楔块都有一个填充图案图像。每个fillPatternImage都有一个文本居中的图像。每个楔块的文本长度不同

问题是我需要给每个fillPatternImage指定一个旋转度，以便所有文本沿圆的周长完美对齐。但我不知道每个图像的旋转角度

例如，当我将所有FillPattern图像的旋转度设置为95°时，短文本对齐得很好，但长文本会弯曲

我认为每个图像的旋转度必须是动态的。但我还没发现是怎么回事。我有楔形尺寸、文本宽度等

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

任何想法都会大有裨益。提前感谢。

如何计算动力楔的旋转角度

使用此FillPattern旋转，您的文本将始终在动能楔中适当旋转：

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

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

  angleDeg: wedgeAngleDeg

您还需要设置适当的楔形填充图案偏移以匹配文本图像

必须将填充图案水平偏移到图像上文本的中点

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

 fillPatternOffset X is image.width/2

必须垂直偏移填充图案，才能将图像文本与楔块上的最大宽度对齐

可以按如下方式计算最大楔块宽度：

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

因此，填充图案偏移变为：

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

下面是代码和小提琴：


身体{
边际：0px；
填充：0px；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var img=新图像（）；
img.onload=函数（）{
start（）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/testing.png";
函数start（）{
var layer=新的动能层（）；
var wedgeAngleDeg=60；
var半径=100；
var textTop=半径*数学sin（楔角角度*数学π/180）；
var楔形=新的动力学楔形({
x:stage.getWidth（）/2，
y:stage.getHeight（）/2，
半径：半径，
角度度：楔形角度度，
图片：img，
fillPatternOffset:[img.width/2，img.height textTop]，
fillPatternRepeat:“不重复”，
FillPattern旋转：Math.PI/2+wedgeAngleDeg*Math.PI/360，
笔画：“黑色”，
冲程宽度：4，
旋转度：0
});
层。添加（楔块）；
楔块。设置旋转度（-45）；
//将层添加到舞台
阶段。添加（层）；
}

如果你能把它做成一个JSFIDLE，这样人们就可以修补它了。它有助于解决这些问题。对不起，项目的一部分是在Rails上运行的，因为图像是用RMagick生成的。JSFIDLE需要重构代码的主要部分。您的文本是图像的一部分还是动态的。文本？如果文本不是图像的一部分，则解决方案更容易。无论哪种方式，您都需要知道字体大小和字体。@markE:文本部分是图像的一部分。我知道字体的大小和字体，但我不知道如何用动态文本实现上述效果。我会回到这个问题上，这个问题仍然没有答案：你的答案正是医生给markE的命令。我对你感激不尽。现在还是星期天，希望你能享受它，度过一个美妙的一周。来自墨西哥的问候。

<!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>