1

軸の周りを回って円を形成するいくつかのくさびがあります。fillPatternImage を使用して、各ウェッジの背景を設定しています。各画像は空白の画像で、中央にテキストがあります。すべての画像はウェッジと同じで、ウェッジよりも幅が広くなっています。

私がやろうとしているのは、fillPatternImage をくさびの中央に設定することです。問題は、ウェッジに幅または高さの属性がないように見えることです。半径と度を使用して、軸の周りに配置します。

ウェッジの 0,0 ではなく、fillPatternImageOffset を使用して背景を((背景幅 - ウェッジ幅) / 2)にオフセットできることは承知しています。しかし、前に述べたように、ウェッジには幅も高さもありません。

視覚的な説明: ここに画像の説明を入力

ウェッジのテキストが中央に配置されているように見えるように、fillPatternImage をウェッジの中央に配置する方法を誰かが考えているでしょうか?

あなたの助けと時間を前もってありがとう。

4

1 に答える 1

0

三角法を使用して、ウェッジの三角形部分の幅/高さを計算できます。

この図では、赤い線が幅、黄色の線が高さです。

ここに画像の説明を入力

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);
  }
于 2013-08-16T05:16:56.970 に答える