Fabricjs Добавить текст в центр прямоугольника

Question

У меня есть круг и прямоугольники внутри. Я хочу назначить числа и символы звездочки. Вот как это выглядит сейчас:

Как вы можете видеть, номер, расположенные в порядке, но звездочки не делают. Они должны располагаться под номерами. Я не буду копировать код здесь, просто взгляните на JSBIN.

Добавление символа звездочки начинается с функции markAsterisk.

Answer 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