替代橡皮擦工具（Fabric js）用于开源橡皮擦工具

Question

我想使用部署在PHP网页中的结构js创建一个在线绘图工具。大多数自定义工具的结构，js，我成功创建。

但我不能像MS Paint橡皮擦那样创建橡皮擦工具..

我发现了这种替代橡皮擦的方法。这将在对象中掩盖白色

function eraser() {
   mode = 'pencil';
   canvas.isDrawingMode = true;
   canvas.freeDrawingBrush.width = strokeWidth;
   canvas.freeDrawingBrush.color = 'white';
}

但是，我想创建一个类似于MS Paint的橡皮擦。我检查了SO，In Fabric js there is no built in eraser

Plz任何人帮助我。

是否可以在织物js中制作橡皮擦？

如果不可能的话，你能否提出任何简单的织物js替代品，比如任何支持橡皮擦功能的开源/免费网络绘图工具。

Answer 1

不幸的是，fabric.js不支持此功能。我认为最好的方法是使用背景颜色绘制，例如：http://fabricjs.com/freedrawing/

但是我发现了这个很好的例子：http://jsfiddle.net/ArtBIT/WUXDb/1/

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 10; // or whatever
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);

我希望这有帮助。

Answer 2

存在这种可能性，但是您应该在您绘制时反转动作：

//eraser
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'destination-out';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'rgba(0,0,0,0)';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });

 //draw
 canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'black';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });