Fabric.js 橡皮擦问题画布 [英] Fabric.js eraser issue canvas

问题描述

我想使用 Fabric.js 在我的网络应用中实现橡皮擦.有没有办法在 Fabric.js 中实现橡皮擦?例如，比如在 MS Paint 中?

I want to implement eraser in my web app using Fabric.js. Is there any way to implement eraser in Fabric.js? For example, such as in MS Paint?

推荐答案

Fabric 没有内置橡皮擦，实现起来有点困难.

There's no built-in eraser in Fabric and implementing is a bit difficult.

Fabric 的特点是一切都是基于对象的，而且大多数东西也是基于向量的.

The thing about Fabric is that everything is object-based and most of the things are also vector-based.

与原生画布不同，我们不能只擦除全局位图上的一些像素.我们在下面有整个对象模型，画布输出是所有渲染到画布上的对象的简单循环.

Unlike with native canvas, we can't just erase some pixels on a global bitmap. We have entire object model underneath, and canvas output is a simple loop of all those objects rendered onto canvas.

我们可以模拟橡皮擦的一种方法可能是在画布上进行某种覆盖.并在其上画出擦除"的线条，给人一种底层物体被抹去的错觉.

One way we could emulate eraser is perhaps by having some kind of overlay on top of canvas. And sort-of draw "erased" lines on it, giving illusion of underlying objects being wiped out.

但是这仍然存在复杂性:

But there are still complications with this:

• 我们如何序列化这个层(JSON 或 SVG)?
• 如果您擦除了一半之前绘制的路径，然后想要使用已擦除的形状怎么办?形状本身需要修改；覆盖不起作用.
• 橡皮擦会只影响形状还是影响背景颜色?背景图片呢?

可能还有更多我当时没有想到的问题.

There's likely more issues that I didn't think of at the moment.

这篇关于Fabric.js 橡皮擦问题画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！