# @erase2d/fabric 中文文档

规范地址：https://npmcn.com/package/%40erase2d/fabric/

版本：1\.2\.2
npm 元数据更新时间：2026-10-18T18:32:17.780Z
中文译文更新时间：2026-11-13T20:23:52.516Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40erase2d/fabric
原文对照：https://npmcn.com/package/%40erase2d/fabric/?lang=original
项目主页：https://github.com/ShaMan123/erase2d#readme
源码仓库：https://github.com/ShaMan123/erase2d

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：122 kB，26 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：fabric \>=6\.0\.0
- 首次发布：2024-03-17T15:50:33.082Z
- 最新版本发布：2026-10-18T18:32:17.584Z
- 近 30 天下载量：34897（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 5 个）

## 中文简介

Fabric.js 擦除2d 绑定

## 安装

```sh
npm install @erase2d/fabric
```

也可以使用：`pnpm add @erase2d/fabric`、`yarn add @erase2d/fabric`、`bun add @erase2d/fabric`

## README

# 断层

用于擦除的布料绑定 . 用途 `PencilBrush` 用于绘图互动.

## 卡维特

Fabric有剪接的局限性,为了支持去除,必须绕道而行. 我决定不黑入织物 利用原型突变来避免接合.

这意味着对象的剪接路径会因下列因素而改变: `ClippingGroup` 当灭亡的时候. 这将替换一个退出的剪贴板路径 `new ClippingGroup([existingClipPath])` 如果不是已经这样了,那么在它们的对象被首次被去除后,你就可以期望剪辑路径会改变. 这也有其优点。 它可以简单地通过将对象添加到剪接组中来剪接一个带有多条剪接路径的对象,这样无论擦去,都可以被使用. 最佳做法可能是: `ClippingGroup` 每个剪辑路径。 这将将对象更改保持在最小值 .

如果您想要删除现有的剪贴板路径, 但不影响擦除 :

```typescript
// 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`数字 :

```json
  ...
  "compilerOptions": {
    "types": ["node_modules/@erase2d/fabric/types"]
  }
```

## 快速启动

```bash
npm i fabric @erase2d/fabric --save
```

```typescript
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;
```

参见 [示例应用程序](https://npmcn.com/package/%40erase2d/app/pages/index.tsx) 用于深度使用.

## 发起人

<table><tbody><tr><td><a href="https://rembg.com/?utm_source=erase2d&amp;utm_medium=github_readme&amp;utm_campaign=sponsorship" rel="nofollow noopener noreferrer"><img alt="RemBG.com Logo" height="120px" src="https://github.com/user-attachments/assets/25433a27-5758-4c02-8375-649acde37556" width="120px" loading="lazy" decoding="async" referrerpolicy="no-referrer"></a></td><td><b>RemBG 背景删除器 API</b><br><a href="https://www.rembg.com/?utm_source=erase2d&amp;utm_medium=github_readme&amp;utm_campaign=sponsorship" rel="nofollow noopener noreferrer">https://www.rembg.com (中文(简体) )</a><br><p>准确和负担得起的背景清除器API -- -- 从1,90美元/美元<br></p></td></tr></tbody></table>

## 从布料中移走@ 5

逻辑从下而上被重修. `Eraser` 已删除,以有利于倾斜者 `ClippingGroup`。 。 。 . 替换 `type` 您的数据应该足够.

[https://github.com/ShaMan123/erase2d/blob/4c9657f8e2d6c20e7274f49a8f8e6d907f9e02e6/src/fabric/ClippingGroup.ts#L11](https://github.com/ShaMan123/erase2d/blob/4c9657f8e2d6c20e7274f49a8f8e6d907f9e02e6/src/fabric/ClippingGroup.ts#L11)

```diff
- type: 'eraser'
+ type: 'clipping'
```

## 德维

构建命令将构建 [`src`](https://npmcn.com/package/%40erase2d/fabric/src) 复制 [`core`](https://npmcn.com/package/%40erase2d/core/dist) 输入 [`dist`](https://npmcn.com/package/%40erase2d/fabric/dist)。 。 。 .

其余的,见主 [`README`](https://npmcn.com/package/README.md)。 。 。 .

## 常见问题

### @erase2d/fabric 是什么？

Fabric\.js 擦除2d 绑定

### 如何安装 @erase2d/fabric？

在项目目录运行 npm install @erase2d/fabric，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：fabric（\>=6\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @erase2d/fabric 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @erase2d/fabric 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @erase2d/fabric 可以商用吗？

@erase2d/fabric 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @erase2d/fabric 的下载量有多少？

根据 npm 官方下载统计，@erase2d/fabric 在 2026/10/14 – 2026/11/12 这 30 天内被下载 34,897 次，日均约 1,163 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @erase2d/fabric 还在维护吗？

最新版本 1\.2\.2 发布于 2026/10/19（26 天前）；至今共发布 16 个版本，其中过去 12 个月发布了 5 个；首次发布于 2024/03/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。