Toggling Font Float with Fabric.JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a little fiddle that I'd like to add buttons for to toggle the text's alignment (left, middle, right, and justified). Currently there are several objects demonstrating each.

Here's what I'm working with so far:

The only criteria I have is that I'd like the buttons to work with JS or jQuery and Fabric.JS 1.7.22. Please have it work in the JSFiddle.

Thank you and please let me know if there's anything I can add that'll help with creating a solution.

awarded to Wuddrum

Crowdsource coding tasks.

1 Solution

This should do:

Changing alignment for all objects

Changing alignment for a selected object

EDIT: Changed the solution to work with multiple selected objects.
EDIT2: Changed solution to be more dynamic and work on all objects that inherit IText.

Nice solutions. However, it does not work with multiple selected text boxes.
LayZee 12 months ago
That would be a nice addition, Wuddrum. Would you mind adding that for a tip?
sharper 12 months ago
I've updated the solution to support multiple selected objects.
Initially, I tried control-clicking multiple objects, but that didn't work, so I discarded the need to check for multiple selections (even though I've worked with fabric.js before...)
Wuddrum 12 months ago
Thank you for the tip!
Wuddrum 12 months ago
Your are welcome! I wonder if something like CMD/CTRL-Clicking would be possible? Difficult, you think? Thanks again
sharper 12 months ago
Also, would it be possible to have this not be bound to just the t1, t2, etc- but to any IText? Again, I'd be willing to tip for this addition as I only just noticed I'd need this. Thank you.
sharper 12 months ago
Only the first version was bound to t1, t2 etc. But I've updated both solutions to work with all objects that inherit IText, and the first solution now looks for all the text objects, instead of applying the style to predefined ones (t1, t2 etc.).
As for control-clicking, while at first it seems like an easy thing to do, I'm not sure how well everything would play with fabricjs events, and could end up consuming more time than expected.
Wuddrum 12 months ago
Thank you for another tip!
Wuddrum 12 months ago
I selected multiple text boxes by Shift-clicking.
LayZee 12 months ago