shaman123 / erase2d Goto Github PK

Shadows were not taken into account when designing the erasing effect unfortunately.
This breaks the entire approach...

A possible solution could be to use context isolation to erase the shadows.
An app could decide that during erasing shadows are not erasable... that is easy to do if the shadow is treated as a non erasable object. But is that desired? Probably not

impl offscreen function

Should solve reported blur issues
Provide context isolation ability to override fabric object caching

Hello, we use yarn instead of npm and seem unable to add this package to our project.

yarn add @erase2d/fabric

Error

error Package "" refers to a non-existing file

Env
MacOS 14.5
Yarn version: 1.22.19

Any ideas?

I am getting the following error when trying to clone an erased fabric object because your clipping group class doesn't exist in fabric:

Error: fabric: No class registered for clipping
at ClassRegistry.getClass (ClassRegistry.ts:30:13)
at objectEnlive.ts:109:12
at Array.map ()
at objectEnlive.ts:107:15
at new Promise ()
at enlivenObjects (objectEnlive.ts:103:3)
at objectEnlive.ts:159:16
at Array.map ()
at objectEnlive.ts:153:54

By the way, do I need to do something with the src/mixins/eraser_brush.mixin.ts file in fabricjs? I am also getting ts errors if I need to access the erasable property of fabric objects.

When I use the PencilBrush component to draw marker content, the eraser does not work properly.

and the background image, even if erasable: false is set, will still be erased by the eraser.

Here is my code：

getDefaults is not called in the contsructor anymore

hi,
thanks for creating this awesome library, it's really helpful, but I encouter a bug that the opacity of objects will be reset to 1 after erasing, do we have some workaround to fix it? thanks!

Hi, is it possible to collapse a path down if it gets shortened?
I'd like for example the bounding box to shrink accordingly. I understand that's not possible for a shape.

As an aside, is this meant for the Fabric beta only? Might be worth a few more words in the readme :)

Hey,
I've been trying to implement the undo method but couldn't manage to do it the way you described in issue#39.

So I decided to save the canvas as JSON instead and reload the canvas on undo requests. But it looks like it breaks the Eraser; it's not possible to erase after that.

import type { Canvas } from "fabric/es";
import { useCallback, useEffect, useState } from "react";

export const useUndo = (canvas: Canvas | null) => {
  const [undoStack, setUndoStack] = useState<Array<JSON>>([]);

  const undo = useCallback(() => {
    if (undoStack.length === 0 || !canvas) return false;

    // get latest state
    const previousState = undoStack[undoStack.length - 1];
    if (!previousState) return false;

    // remove it from the undo stack
    setUndoStack((prev) => prev.slice(0, prev.length - 1));

    // reload the canvas with the state
    canvas.cancelRequestedRender();
    canvas.loadFromJSON(previousState)
      .then(() => { canvas.renderAll(); })
      .catch(() => null)

    return true;
  }, [undoStack, canvas]);

  const saveCanvas = useCallback(() => {
    if (!canvas) return;
    const json = canvas.toJSON() as JSON;
    setUndoStack((prev) => [...prev, json])
  }, [canvas])

  useEffect(() => {
    if (!canvas) return;
    // whenever an action is made, save the current state
    canvas.on('mouse:down:before', saveCanvas)
    return () => { canvas.off('mouse:down:before', saveCanvas); }
  }, [canvas, saveCanvas])

  return { undo };
}

Here is the CodeSandbox link

To replicate the behavior, erase the image, click the undo button, and try to erase again.

Does it have something to do with the dirty state you mentioned ?

Thanks!

I wonder if that can be done if fabric currently

Hey, I recently discovered the '@erase2d/fabric' library and attempted to integrate it into my Next.js project. However, I am encountering an issue with TypeScript type recognition when using this library with Fabric 6.0. Here are the details of the problem:

Steps to Reproduce:

1. Install the library and its dependencies in a Next.js project:

npm install @erase2d/fabric [email protected]

2. Attempt to import and use '@erase2d/fabric' in a TypeScript file (useCanvasEraser.ts).

// Example useCanvasEraser.ts file
import { EraserBrush } from '@erase2d/fabric'; 
// Attempt to use EraserBrush but TypeScript does not recognize its types

Notice that TypeScript does not recognize types/interfaces from '@erase2d/fabric'.

Also, I'm trying to use it to erase a freeDrawingBrush, but I haven't found any tutorials on how to do that

Version

5.3.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://codepen.io/hoqcaeiq-the-animator/pen/MWROpwx

Steps To Reproduce

1. draw a picture with the brush.
2. Use the eraser to erase the drawing with very slow movements.

Expected Behavior

Normal behavior is that even if the eraser moves very slowly, the area it passes over should be cleanly erased.

Actual Behavior

As you can see in the video, there is an afterimage and you can see the afterimage even if you change the color.

This bug is in 5.3, but the same bug occurs in 4.4.
I would like to know how to fix it.

In the official example, you can see that the same bug occurs if you set the width of the eraser brush to high and then move it very slowly to erase.

Thanks for listening

Hi ShaMan123,

I hope everything is going well.

When I set the canvas's background image first and then start erasing. I don't want the background image change. But there is a black brush trail left on the background image. Any clue how to solve this?

can I use this with fabric v5 ? or I need to upgrade to V6?

thanks

target, path

Seems to be a result of aliasing

Reading your source code, it seems to be
first you override all onMouse function,
when onMouseDown triggered, you call drawEffect and parent class onMouseDown method
when onMouseMove, just call parent class onMouseMove and dispatch move event
when onMouseUp, additionally call disposer initialized in onMouseDown event, which will call erase and drawEffect method

I do not quite understand clipping the destination context and compositing it with the source context
And why you use effectContext
Could you please explain a lit bit more in detail?
Thank you so much

in V5 I used to use eraser brush on another canvas without mouse being involved, but its unclear with the V6 how can this be done.

 
  const simulateEraser = (x, y) => {
                        const fakeEvent = {..}

                        const pointer = new fabric.Point(x, y);
                      
                        // Simulate mouse down, move, and up to "draw" with the eraser
                    
  
        }
        
        
                         simulateEraser(100, 150);

import * as fabric from 'fabric'; import { EraserBrush, ClippingGroup } from '@erase2d/fabric';

Using Pencil Brush for free-hand drawing
canvas.isDrawingMode = true; canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); canvas.freeDrawingBrush.color = #${anyColour}; canvas.freeDrawingBrush.width = 20;

Using Eraser from @erase2d/fabric
canvas.isDrawingMode = true; const eraser = new EraserBrush(canvas); eraser.width = 30; eraser.on('end', e => { e.preventDefault(); eraser.commit(e.detail); }); canvas.freeDrawingBrush = eraser;

@ShaMan123 As you can see in the video, its seems like Cropping the area.
Please look into this issue and help me to resolve this issue.

Thanks a lot for your time.