Fabric.js: Possible to override bounding box selection area in fabricjs - controls option

[Vivek-KT]

Hi to all,

Here, we are working in fabric.js with creating design tool.We have create custom selection area for canvas object in fabric.js. I read source code in fabric.js, it generates square box for bounding box, but I want change to my custom Selection area appearance.Can please advise me?

HERE SOME DANCING DOTTED SELECTION AREA.

We want custom selection area appearance.

We have tried this code context.setLineDash() for selection area.

if (fabric.StaticCanvas.supports('setLineDash') === true) {
    ctx.setLineDash([4, 4]);
}

Refer code from Github.But won`t working fine for my working area.
How can we create custom selection area in fabric.js?

Thanks in advance

VIVEK KT

[asturur]

http://fabricjs.com/fabric-changelog

please refer to changes in version 1.6.2 there are the properties needed to change the selection area.

Also http://fabricjs.com/docs

[Vivek-KT]

HI @asturur ,

Thank you so much for your quick response.

Here, we have reviewed that version 1.6.2 and updated my fabric.all.min.js (1.4 -> 1.7.2) file.But how to call that borderDashArray option/method in derived function.Is there any example for borderDashArray function.? We need to add animated "Selection Border" like dancing Dotted sign for every object selection.

Kindly give some idea for this.

VIVEK KT.

[asturur]

borderDashArray is a property, you set an array to it [2, 4] for example.
There is no built in code to animate the selection.
I would suggest of not trying to animate it with fabricjs directly since animation is per object.
You could try to create a top level function with a setInterval that will check if there is a activeObject on canvas. if yes swap the strokeDashArray from [2, 0, 2, 0] to [0, 2, 0, 2] and see if it works.
If more details are needed please open a stackoverflow question, nothing that we can support here.

[Vivek-KT]

HI @asturur .. Thank you for guide me. i am trying based on your idea and also i have create "Stackoverflow" Question.. Kindly review it and let me know your feedback.
Still I tried to create animated function for that borderarray but its not working fine.

Thanks
VIVEK KT

[cherishh]

Hi, I have similar needs to this, but I guess it's a little bit harder - I want to customize selection area. I'm developing a drawing tool that one can draw polygon with mouse click, and also modify it. I've successfully achieved this, but my problem is no matter what shape the polygon is, selection area is always the bounding box. So sometimes I click on a blank area, I accidentally selected a polygon. I want to select a polygon only when I actually clicked on one.

How can I achieve this? Any help would be appreciated.

[cherishh]

I found the solution. https://stackoverflow.com/questions/29203355/how-to-select-the-objects-by-only-clicking-the-actual-contents-by-fabric-js?rq=1

[asturur]

you can use the transparency selection for that, please give a look at the docs, should be explained.

perPixelTargetFind is called

[cherishh]

@asturur Thanks! This is exactly what I needed.