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

问题描述

我想使用Fabric.js在我的网络应用程序中实现橡皮擦。有什么方法在Fabric.js中实现橡皮擦？例如，在MS Paint？

解决方案

Fabric中没有内置橡皮擦，实现有点困难。 / p>

关于Fabric的事情是一切都是基于对象的，大多数事情也是基于向量的。

与原生画布不同，我们不能仅仅删除全局位图上的一些像素。我们在下面有整个对象模型，canvas输出是所有在canvas上呈现的那些对象的一个​​简单的循环。

我们可以模仿橡皮擦的一种方法是，覆盖在画布顶部。和排序的绘制擦除线，给它的基础对象的幻觉被消灭。

但仍然有这样的问题：

• 如果您删除一半的以前绘制的路径，然后想使用已擦除的形状，该怎么办？形状本身需要修改;


• 橡皮擦会仅影响形状还是背景颜色？ b

  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?

  解决方案

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

  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:

  • How would we serialize this layer (to JSON or to SVG)?
  • What if you erase half of previously-drawn path and then want to work with already erased shape? The shape itself needs to be modified; overlay wouldn't work.
  • Would eraser affect only shapes or also background color? What about background image?

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

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