如何擦除fabric.js中的圖形？

Question

有一個對象的畫布。需要繪製對象並且還需要橡皮擦功能。 查看畫布屏幕截圖： canvas where able drawing function

我看到fabric.js沒有擦除功能。有沒有什麼方法可以用擦除畫筆擦除繪圖？

感謝

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) { 
 
\t return { 
 
    \t x : evt.pageX - this.offsetLeft, 
 
    y : evt.pageY - this.offsetTop 
 
    }; 
 
}; 
 

 
canvas.onmousedown = function (e) { 
 
\t 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) { 
 
\t 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) { 
 
\t if (!drawing) return false; 
 
    drawing = false; 
 
}; 
 

 
toBase64Btn.onclick = function() { 
 
\t if (drawing) return false; 
 
    
 
    var img = document.createElement("img"); 
 
    
 
    img.onload = function() { 
 
    
 
    \t var group = []; 
 
    
 
    \t ctx.clearRect(0,0,canvas.width, canvas.height); 
 
    fabCan.add(new fabric.Image(this)); 
 
    
 
    fabCan.getObjects().forEach(function (obj) { 
 
    \t 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() { 
 
\t 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>

我的代碼是在這裏 的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 
})); 

我認爲這對你有所幫助