CODEWITHSUNDEEP
canvasfabricjs
user348173
user348173

Reputation: 9278

Fabricjs Add text to the center of rectangle

I have circle and rectangles inside. I want to assign numbers and asterisk chars. This is how it looks now:

enter image description here

As you can see, numbers located fine, but asterisks don't. They should be located under numbers. I won't copy code here, just have a look at JSBIN.

Adding asterisk chars starts in markAsterisk function.

Upvotes: 0

Views: 2725

Answers (1)

michaPau
michaPau

Reputation: 1648

One way is to calculate the asterisk position in the same way you calculate the number position but with a slightly smaller radius (minus 10 in your case I guess) and store that for later use in the config array.

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"
}

I named it here aLeft and aTop for the asterisks position. See the (rectRadius-10) for the position with the smaller radius. Change that if you want more offset.

and use this position in your addAsteriks function:

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

Fiddle link

Upvotes: 0

Related Questions