How to change the appearance of the size of Fabric.js pens?

Question

Fabric.js is really convenient for its interactive mode, which allows you to manipulate objects, for example, in a vector drawing program such as Inkscape. I would like to use this ability in a web application project that needs a collage editor.

By default, when an object is selected, the bounding boxes and resizing handles appear in blue, and the handles appear in large blue hollow squares. I would like to change this according to my project.

The documentation has a special page on how to perform this type of setup here: http://fabricjs.com/customization/

Using the above guide, I can get selection boxes that look better in my application. But this is a solution for every object. When you select a group using the Shift key, the handles and bounding box return to cyan by default.

How can I achieve the same level of customization as indicated in the documentation and automatically apply it to the entire canvas, including group selection?

Answer 1

You can override the default object management properties worldwide and set them to your preference. Here is what your code looks like:

fabric.Object.prototype.set({ transparentCorners: false, borderColor: '#ff00ff', cornerColor: '#ff0000' }); 

You can set this at the beginning of the code. This will override the default control styles and will be applied everywhere. Here you can find a working script: http://jsfiddle.net/apyeLeut/1/

Answer 2

You can overwrite this behavior inside the object:selected event. For example,

 canvas.on('object:selected',function(e){ e.target.transparentCorners = false; e.target.borderColor = 'green'; e.target.cornerColor = 'purple'; }); 

Fiddle

Answer 3

I am using the parent version 1.7.19 and I tried to make Swapnil JainJain as an answer , but in my case it does not work.

As an alternative, I came up with this solution:

  fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)'; fabric.Object.prototype.cornerSize = 20; fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.cornerColor = '#eee'; 

I tested the following situations:

• Before the document is ready;
• After the document is ready,
• After pressing the button