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: http://jsfiddle.net/code4ever/kap5yvfm/

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 1 month ago
That would be a nice addition, Wuddrum. Would you mind adding that for a tip?
sharper 1 month 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 1 month ago
Thank you for the tip!
Wuddrum 1 month ago
Your are welcome! I wonder if something like CMD/CTRL-Clicking would be possible? Difficult, you think? Thanks again
sharper 1 month 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 1 month 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 1 month ago
Thank you for another tip!
Wuddrum 1 month ago
I selected multiple text boxes by Shift-clicking.
LayZee 1 month ago