用于开源橡皮擦工具的橡皮擦工具（Fabric js）的替代品答案

【问题标题】：Alternative of Eraser Tool(Fabric js) for a open source Eraser tool用于开源橡皮擦工具的橡皮擦工具（Fabric js）的替代品
【发布时间】：2015-08-01 09:29:08
【问题描述】：

我想创建一个使用fabric js的在线绘图工具部署在一个PHP网页中。fabric,js的大部分自定义工具我都创建成功了。

但我无法像 MS Paint 橡皮擦那样创建橡皮擦工具..

我找到了这种橡皮擦的替代方法。这将在对象中屏蔽白色

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

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

请任何人帮助我。

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

如果不可能，您能否推荐任何简单的fabric js 替代品，例如任何开源/免费网络绘图工具，它会支持橡皮擦功能。

【问题讨论】：

标签： javascript php paint fabricjs

【解决方案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);

我希望这会有所帮助。

【讨论】：

感谢 ptCoder，我现在才使用这个方法。如果不能在 fabric js 中做，请建议我任何其他支持橡皮擦的替代绘图工具。
检查这个：stackoverflow.com/a/25916334/2247124。如果有帮助，您可以接受答案；）
是的，谢谢 prCoder。你的回答帮助了我。但是像橡皮擦一样的绘画在织物 js 中不支持。

【解决方案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();
    });

【讨论】：