开源橡皮擦工具的橡皮擦工具（Fabric js）的替代品

Question

我想使用 fabric js 创建一个 在线绘图工具，部署在 PHP web page.Most fabric,js 的自定义工具中，我创建成功。

但是我无法像 MS Paint 橡皮擦..
中那样创建橡皮擦工具
我发现 eraser.This 的这种替代方法会在对象
中遮盖白色颜色
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 替代品，就像任何 open source/free 网络绘图工具 这将支持橡皮擦功能。

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();
    });

开源橡皮擦工具的橡皮擦工具（Fabric js）的替代品

Alternative of Eraser Tool(Fabric js) for a open source Eraser tool

javascript

php

paint

fabricjs