Adding Custom Delete (Back,toFront) Button to Controls
canvas, fabricjs, html, html5-canvas, javascript
Solution
Fabric.js does not offer any simple mean of adding controls to objects. If you want to create your own controls, you will have to overwrite the Object class, notably:
- override `drawControls`, to draw your custom button
- you will need to store the button's coordinates, so that you can detect when the user clicks them. C.f. `_setCornerCoords` and `_findTargetCorner`
- incorporate your action somewhere in `__onMouseDown`
You don't need to take care of 'undrawing' the controls, as the whole canvas is re-rendered when an object is de-selected.
I hope this helps, and good luck :)
Problem
I would like to know if there is an easy way to add a delete, bring to front, bring to back function into the existing fabric.js object controls. At the moment I can only click on buttons which would delete object, bring to front etc. I am working on finding a solution to be able to press X (on the upper right corner) on the object and delete the object. I guess it will have to do with overwriting, wrapping or subclassing the existing control object. Maybe I have overseen something and there is an easy solution? Please no Div Wrapper.