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

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