Fabricjs長方形の中心にテキストを追加

Question

中には円と四角形があります。私は数字とアスタリスク文字を割り当てたい。 これは、今どのように見えるかです：あなたが見ることができるように、数字は細かい位置

が、アスタリスクはしないでください。彼らは番号の下に位置する必要があります。私はここにコードをコピーしません、ちょうどJSBINを見てください。

アスタリスク文字を追加すると、markAsterisk機能が開始されます。

Answer 1

1つの方法は、数字の位置を計算するのと同じ方法でアスタリスクの位置を計算することですが、半径をわずかに小さくして（あなたの場合は10を引いて）、後でconfigアレイで使用するために保存します。

var rectConfig = Object.assign({ 
    left: canvas.getHeight()/2 + rectRadius * Math.cos(radAngle), 
    top: canvas.getWidth()/2 + rectRadius * Math.sin(radAngle), 
    aLeft: canvas.getHeight()/2 + (rectRadius-10) * Math.cos(radAngle), 
    aTop: canvas.getWidth()/2 + (rectRadius-10) * Math.sin(radAngle), 
    angle: angle + 90, 
    originX: "center", 
    originY: "center" 
} 

私は、アスタリスクの位置のためにここにaLeftとaTopそれを命名。 半径が小さい方の位置は(rectRadius-10)を参照してください。 オフセットをさらに変更する場合は、変更してください。

とあなたのaddAsteriks機能で、この位置を使用します。答えを

number.set('top', rect.aTop); 
number.set('left', rect.aLeft); 

Fiddle link