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