如何删除fabric.js中的绘图？

Question

There is a canvas with an object. Need to drawing on object and also need eraser function. See the canvas screenshot: canvas where able drawing function

I see fabric.js hasn't erasing functionality. Is there any way to erase drawing with a erase brush?

Thanks

Answer 1

 var toBase64Btn = document.getElementById("toBase64"); var canvas = document.getElementById("a"); var ctx = canvas.getContext("2d"); var drawing = false; var drawingMode = "add"; var pencilWidth = 25; var base64Str = ""; var fabCan = new fabric.Canvas("b"); var fillColor = "rgba(255,0,0,.5)"; var getMouseCoordinate = function (evt) { return { x : evt.pageX - this.offsetLeft, y : evt.pageY - this.offsetTop }; }; canvas.onmousedown = function (e) { if (drawing) return false; drawing = true; var mouse = getMouseCoordinate.call(this, e); ctx.globalCompositeOperation = drawingMode === "add" ? "xor" : "destination-out"; ctx.fillStyle = drawingMode === "add" ? fillColor : "rgba(0,0,0,1)"; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); }; canvas.onmousemove = function (e) { if (!drawing) return false; var mouse = getMouseCoordinate.call(this, e); ctx.beginPath(); ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); }; canvas.onmouseup = function (e) { if (!drawing) return false; drawing = false; }; toBase64Btn.onclick = function () { if (drawing) return false; var img = document.createElement("img"); img.onload = function () { var group = []; ctx.clearRect(0,0,canvas.width, canvas.height); fabCan.add(new fabric.Image(this)); fabCan.getObjects().forEach(function (obj) { obj.globalCompositeOperation = "xor"; group.push(obj); }); fabCan.clear().add(new fabric.Group(group)).renderAll(); }; img.src = canvas.toDataURL("image/png"); }; document.getElementById("erase").onchange = function () { drawingMode = this.checked ? "delete" : "add"; console.warn(drawingMode); }; fabCan.add(new fabric.Rect({ width: 100, height: 100, fill: fillColor })); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Erase: <input id="erase" type="checkbox"> <button id="toBase64" type="button">addToAOILayer</button><br/> <canvas id="a" width="400" height="300"></canvas> <canvas id="b" width="400" height="300"></canvas> 

My code is here Html

Erase: <input id="erase" type="checkbox">
<button id="toBase64" type="button">addToAOILayer</button><br/>
<canvas id="a" width="400" height="300"></canvas>
<canvas id="b" width="400" height="300"></canvas>

Fabric.js

var toBase64Btn = document.getElementById("toBase64");
var canvas = document.getElementById("a");
var ctx = canvas.getContext("2d");
var drawing = false;
var drawingMode = "add";
var pencilWidth = 25;
var base64Str = "";
var fabCan = new fabric.Canvas("b");
var fillColor = "rgba(255,0,0,.5)";

var getMouseCoordinate = function (evt) {
    return {
    x : evt.pageX - this.offsetLeft,
    y : evt.pageY - this.offsetTop
  };
};

canvas.onmousedown = function (e) {
    if (drawing) return false;
  drawing = true;
  var mouse = getMouseCoordinate.call(this, e);

  ctx.globalCompositeOperation = drawingMode === "add" ? "xor" : "destination-out";
  ctx.fillStyle = drawingMode === "add" ? fillColor : "rgba(0,0,0,1)";

  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmousemove = function (e) {
    if (!drawing) return false;
  var mouse = getMouseCoordinate.call(this, e);
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmouseup = function (e) {
    if (!drawing) return false;
  drawing = false;
};

toBase64Btn.onclick = function () {
    if (drawing) return false;

  var img = document.createElement("img");

  img.onload = function () {

    var group = [];

    ctx.clearRect(0,0,canvas.width, canvas.height);
    fabCan.add(new fabric.Image(this));

    fabCan.getObjects().forEach(function (obj) {
        obj.globalCompositeOperation = "xor";
      group.push(obj);
    });

    fabCan.clear().add(new fabric.Group(group)).renderAll();
  };

  img.src = canvas.toDataURL("image/png");
};

document.getElementById("erase").onchange = function () {
    drawingMode = this.checked ? "delete" : "add";
  console.warn(drawingMode);
};

fabCan.add(new fabric.Rect({
width: 100,
height: 100,
fill: fillColor
}));

I think it's help you