Fabricjs添加文本到矩形的中心

Question

我在裏面有圓形和矩形。我想分配數字和星號字符。 這是現在的樣子：位於細

正如你所看到的，數字的，但星號沒有。他們應該位於數字下。我不會在這裏複製代碼，只需看看JSBIN。

添加星號字符在markAsterisk函數中開始。

Answer 1

的一種方法是計算出星號位置你算算數位方式相同，但與（在你的情況我想減去10）略小的半徑，並存儲爲配置陣列中以後使用。

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