Fabric bindings for erase2d.
Uses PencilBrush for the drawing interaction.
Fabric has clipping limitations that must be worked around in order to support erasing. I decided not to hack into fabric using prototype mutation to avoid coupling.
This means that an object's clip path is subject to change by ClippingGroup when erasing is committed.
It will replace an exiting clip path with new ClippingGroup([existingClipPath]) if it didn't already so you can expect clip paths to change after their object was erased for the first time.
This has an advantage as well. It allows to clip an object with a number of clip paths simply by adding them to the clipping group so it can be used regardless of erasing.
Best practice might be to use ClippingGroup for every clip path. This will keep your object changes to a minimum.
In case you wish to remove the existing clip path but not affect erasing:
// check if the object was erased
object.clipPath instanceof ClippingGroup
? object.clipPath.remove(
object.clipPath.item(0) /** the existing clip path is first */
)
: delete object.clipPath;The erasable property is added by this module.
In case typescript fails to augment fabric, update your tsconfig.ts:
...
"compilerOptions": {
"types": ["node_modules/@erase2d/fabric/types"]
}npm i fabric @erase2d/fabric --saveimport { EraserBrush, ClippingGroup } from '@erase2d/fabric';
import { Circle } from 'fabric';
const circle = new Circle({ radius: 50, erasable: true });
canvas.add(circle);
const eraser = new EraserBrush(canvas);
eraser.width = 30;
eraser.on('start', (e) => {
// inform something
});
eraser.on('end', async (e) => {
// prevent from committing erasing to the tree
e.preventDefault();
const { path, targets } = e.detail;
const isErased = targets.includes(circle);
// commit erasing manually
const pathPerObjectMap = await eraser.commit({ path, targets });
const committedEraser = circle.clipPath instanceof ClippingGroup;
});
canvas.freeDrawingBrush = eraser;
canvas.isDrawingMode = true;Refer to the example app for in depth usage.
|
RemBG Background Remover API
https://www.rembg.com
Accurate and affordable background remover API - from 1,90$ per mo
|
The logic has been reworked from the bottom.
Eraser has been removed in favor of the leaner ClippingGroup.
Replacing the type in your data should be enough.
erase2d/src/fabric/ClippingGroup.ts
Line 11 in 4c9657f
- type: 'eraser'
+ type: 'clipping'The build command will build src and copy core into dist.
For the rest, see the main README.