0

我有以下圆圈，由楔子制成。每个楔形都有一个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();
}

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

4

1 回答 1

1

如何计算动力学楔的 fillPatternRotation 角度

在此处输入图像描述

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

  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>
于 2013-08-17T05:36:23.347 回答