断层
用于擦除的布料绑定 .
用途 PencilBrush 用于绘图互动.
卡维特
Fabric有剪接的局限性,为了支持去除,必须绕道而行. 我决定不黑入织物 利用原型突变来避免接合.
这意味着对象的剪接路径会因下列因素而改变: ClippingGroup 当灭亡的时候.
这将替换一个退出的剪贴板路径 new ClippingGroup([existingClipPath]) 如果不是已经这样了,那么在它们的对象被首次被去除后,你就可以期望剪辑路径会改变.
这也有其优点。 它可以简单地通过将对象添加到剪接组中来剪接一个带有多条剪接路径的对象,这样无论擦去,都可以被使用.
最佳做法可能是: ClippingGroup 每个剪辑路径。 这将将对象更改保持在最小值 .
如果您想要删除现有的剪贴板路径, 但不影响擦除 :
// check if the object was erased
object.clipPath instanceof ClippingGroup
? object.clipPath.remove(
object.clipPath.item(0) /** the existing clip path is first */
)
: delete object.clipPath;
类型洞穴
这个 erasable 属性由此模块添加.
如果打字失败, 请更新您的织物 tsconfig.ts数字 :
...
"compilerOptions": {
"types": ["node_modules/@erase2d/fabric/types"]
}
快速启动
npm i fabric @erase2d/fabric --save
import { EraserBrush, ClippingGroup } from '@erase2d/fabric';
import { Circle } from 'fabric';
const circle = new Circle({ radius: 50, erasable: true });
canvas.add(circle);
const eraser = new EraserBrush(canvas);
eraser.width = 30;
eraser.on('start', (e) => {
// inform something
});
eraser.on('end', async (e) => {
// prevent from committing erasing to the tree
e.preventDefault();
const { path, targets } = e.detail;
const isErased = targets.includes(circle);
// commit erasing manually
const pathPerObjectMap = await eraser.commit({ path, targets });
const committedEraser = circle.clipPath instanceof ClippingGroup;
});
canvas.freeDrawingBrush = eraser;
canvas.isDrawingMode = true;
参见 示例应用程序 用于深度使用.
发起人
|
|
RemBG 背景删除器 API
https://www.rembg.com (中文(简体) )
准确和负担得起的背景清除器API -- -- 从1,90美元/美元
|
从布料中移走@ 5
逻辑从下而上被重修.
Eraser 已删除,以有利于倾斜者 ClippingGroup。 。 。 .
替换 type 您的数据应该足够.
- type: 'eraser'
+ type: 'clipping'
德维
构建命令将构建 src 复制 core 输入 dist。 。 。 .
其余的,见主 README。 。 。 .