CODEWITHSUNDEEP
fabricjs
user1576748
user1576748

Reputation: 687

How to change the default selectionColor on fabric.js?

How can I change the default bluish selectionColor on fabric.js? I've tried to change these lines in fabric.js but got no effect:

selectionColor: 'rgba(17,119,255,0.3)',
selectionBorderColor:   'rgba(255, 255, 255, 0.3)',
editingBorderColor: 'rgba(102,153,255,0.25)',

Is there any other way?

enter image description here

Upvotes: 6

Views: 7960

Answers (4)

Theo Itzaris
Theo Itzaris

Reputation: 4671

You can change the border color (it shows when you select object) of fabric objects with this parameter: borderColor

for example :

canvas._objects[0].set({'borderColor':'#fbb802'});
canvas.renderAll();

hope helps, good luck.

Upvotes: 1

Theo Itzaris
Theo Itzaris

Reputation: 4671

enter image description here ok, now i see what you need exactly, you want to change the border of the selected grouped object and maybe the squares on the border too.

i tested it on kitchensink, and it works, you have to catch the selection event , and inside the event you change the borderColor and cornerColor properties of the activeGroup.

your object:selected event:

canvas.on('object:selected', function(o) {
    var activeObj = o.target;
    if (activeObj.get('type') == 'group') {
        activeObj.set({
            'borderColor':'#fbb802',
            'cornerColor':'#fbb802'
        });
    }
});

hope helps, good luck.

Upvotes: 14

Navi
Navi

Reputation: 179

After searching a lot I finally found a solution to change the default format style when selecting more than one object.

fabric.Object.prototype.set({     
    transparentCorners: false,
    cornerStyle: 'circle',
    cornerColor: '#3880ff',
    cornerSize: 12,
})

Upvotes: 0

Ostap Brehin
Ostap Brehin

Reputation: 3957

Use selectionBorderColor property.

canvas.selectionBorderColor = 'red';

For more information visit: http://fabricjs.com/customization

Upvotes: 0

Related Questions