The thing about Fabric is that everything is object based and most things are vector based as well.

Unlike a native canvas, we can’t just delete some pixels on the global bitmap. We have the whole object model down here, and the Canvas output is a simple loop of all those objects rendered on the Canvas.

One, what our eraser wants to do is erase an arbitrary part of the object, not delete it directly,

Implementation plan 1: Using the white brush as the eraser, add a white on any of them to cover the current color, 1. If the whiteboard has a background,

2. If the whiteboard has night mode and day mode, the white eraser lines will be fully displayed

The scheme failed

**Eraser Brush solution is provided to implement Eraser only need to download the file to local reference is good

* * github.com/fabricjs/fa…

import '@/libs/eraser_brush.mixin.js'; Const canvas = new fabric.canvas ('c'); // Set the brush to eraser canvas. FreeDrawingBrush = new fabric.eraserBrush (canvas); canvas.freeDrawingBrush.width = 35; canvas.freeDrawingBrush.color = '#FFF'; canvas.isDrawingMode = true;Copy the code

So the brush becomes an eraser, you rub it where you point,

This brings us to the next problem: 1. If you’re sharing a whiteboard, your eraser should be synchronized to the collaborator.

At first, I thought that the eraser was also a brush path object, and I just passed the brush object to the collaborator to achieve the overall eraser function. Finally, I synchronized a bunch of white lines across.

Check out the official demo

The eraser mixin uses the clipPath property of an object the apply erasing to it.

  1. It creates a fabric.Group object and assert It to the object’s clipPath.

  2. It creates a fabric.Rect and adds it to the group as the first object for clipping to be successful (acts as the background for destination-out global composition operation).

  3. It applies the existing clipPath property to the fabric.Rect from the previous step.

  4. After erasing is done it adds fabric.Paths to create an erasing effect on the object

Earser is not implemented as a path brush, but as a clipPath object using its properties.

Once the erasure is complete, it adds fabric.Paths to create the erasure effect on the object, creating a clipPath property for the object,

So you need to change the synchronization scheme, when eraser erases, don’t synchronize with brush, otherwise you will synchronize a bunch of white lines

path.clone(function (path) { path.globalCompositeOperation = 'destination-out'; // http://fabricjs.com/using-transformations var desiredTransform = fabric.util.multiplyTransformMatrices( fabric.util.invertTransform( obj.calcTransformMatrix() ), path.calcTransformMatrix() ); fabric.util.applyTransformToObject(path, desiredTransform); clipObject.addWithUpdate(path); obj.set({ clipPath: clipObject, dirty: true }); obj.fire('erasing:end', { path: path }); if (obj.group && Array.isArray(_this.__subTargets)) { _this.__subTargets.push(obj); }}); },Copy the code

Eraser_brush.mixin. js will have the erasing:end event after eraser_brush.mixin.js. The message can be sent to the collaborators via Erasing: End, where is the sender

Canvas. On ('erasing:end', (e) => {const {targets} = e; // targets indicates all elements affected, because the eraser may wipe several elements at a time for(let I = 0; i < targets.length; i++) { const item = targets[i]; const str = item.TOJSON(['id']); SendMessage (json.stringify (STR)) // Send eraser changes to collaboration}})Copy the code

** Recipient **

fucntion updateErasing(str) { const canvas = new fabric.Canvas('c'); const obj = JSON.parse(str); const item = canvas.getObjectById(obj.id); canvas.remove(item); / / delete the elements in the first drawing board fabric. The util. EnlivenObjects ((obj) and (objects) = > {objects. ForEach ((o) = > {canvas. Add (o); // After adding the eraser element,})})}Copy the code

The receiver tried to modify the Item clipPath object and found that the modification to the object did not synchronize the eraser function

At this point, the functions that fabric.js implements for eraser and data transfer reception are complete

For example: fabricjs.com/erasing