@erase2d/fabric
Version:
Fabric.js erase2d bindings
114 lines • 4.82 kB
TypeScript
import * as fabric from 'fabric';
export type EventDetailMap = {
start: fabric.TEvent<fabric.TPointerEvent>;
move: fabric.TEvent<fabric.TPointerEvent>;
end: {
path: fabric.Path;
targets: fabric.FabricObject[];
};
redraw: {
type: 'start' | 'render';
};
cancel: never;
};
export type ErasingEventType = keyof EventDetailMap;
export type ErasingEvent<T extends ErasingEventType> = CustomEvent<EventDetailMap[T]>;
export declare function commitErasing(object: fabric.FabricObject, sourceInObjectPlane: fabric.Path): void;
export declare function eraseObject(object: fabric.FabricObject, source: fabric.Path): Promise<fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>>;
export declare function eraseCanvasDrawable(object: fabric.FabricObject, vpt: fabric.TMat2D | undefined, source: fabric.Path): Promise<fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>>;
/**
* Supports **selective** erasing: only erasable objects are affected by the eraser brush.
*
* Supports **{@link inverted}** erasing: the brush can "undo" erasing.
*
* Supports **alpha** erasing: setting the alpha channel of the `color` property controls the eraser intensity.
*
* In order to support selective erasing, the brush clips the entire canvas and
* masks all non-erasable objects over the erased path, see {@link draw}.
*
* If **{@link inverted}** draws all objects, erasable objects without their eraser, over the erased path.
* This achieves the desired effect of seeming to erase or undo erasing on erasable objects only.
*
* After erasing is done the `end` event {@link ErasingEndEvent} is fired, after which erasing will be committed to the tree.
* @example
* canvas = new Canvas();
* const eraser = new EraserBrush(canvas);
* canvas.freeDrawingBrush = eraser;
* canvas.isDrawingMode = true;
* eraser.on('start', (e) => {
* console.log('started erasing');
* // prevent erasing
* e.preventDefault();
* });
* eraser.on('end', (e) => {
* const { targets: erasedTargets, path } = e.detail;
* e.preventDefault(); // prevent erasing being committed to the tree
* eraser.commit({ targets: erasedTargets, path }); // commit manually since default was prevented
* });
*
* In case of performance issues trace {@link drawEffect} calls and consider preventing it from executing
* @example
* const eraser = new EraserBrush(canvas);
* eraser.on('redraw', (e) => {
* // prevent effect redraw on pointer down (e.g. useful if canvas didn't change)
* e.detail.type === 'start' && e.preventDefault());
* // prevent effect redraw after canvas has rendered (effect will become stale)
* e.detail.type === 'render' && e.preventDefault());
* });
*/
export declare class EraserBrush extends fabric.PencilBrush {
/**
* When set to `true` the brush will create a visual effect of undoing erasing
*/
inverted: boolean;
effectContext: CanvasRenderingContext2D;
private eventEmitter;
private active;
private _disposer?;
constructor(canvas: fabric.Canvas);
/**
* @returns disposer make sure to call it to avoid memory leaks
*/
on<T extends ErasingEventType>(type: T, cb: (evt: ErasingEvent<T>) => any, options?: boolean | AddEventListenerOptions): () => void;
drawEffect(): void;
/**
* @override
*/
_setBrushStyles(ctx?: CanvasRenderingContext2D): void;
/**
* @override strictly speaking the eraser needs a full render only if it has opacity set.
* However since {@link PencilBrush} is designed for subclassing that is what we have to work with.
*/
needsFullRender(): boolean;
/**
* @override erase
*/
_render(ctx?: CanvasRenderingContext2D): void;
/**
* @override {@link drawEffect}
*/
onMouseDown(pointer: fabric.Point, context: fabric.TEvent<fabric.TPointerEvent>): void;
/**
* @override run if active
*/
onMouseMove(pointer: fabric.Point, context: fabric.TEvent<fabric.TPointerEvent>): void;
/**
* @override run if active, dispose of {@link drawEffect} listener
*/
onMouseUp(context: fabric.TEvent<fabric.TPointerEvent>): boolean;
/**
* @override {@link fabric.PencilBrush} logic
*/
convertPointsToSVGPath(points: fabric.Point[]): fabric.util.TSimplePathData;
/**
* @override
*/
createPath(pathData: fabric.util.TSimplePathData): fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>;
commit({ path, targets, }: EventDetailMap['end']): Promise<Map<fabric.FabricObject, fabric.Path>>;
/**
* @override handle events
*/
_finalizeAndAddPath(): void;
dispose(): void;
}
//# sourceMappingURL=EraserBrush.d.ts.map