# @eraserlabs/render 中文文档

规范地址：https://npmcn.com/package/%40eraserlabs/render/

版本：0\.5\.2
npm 元数据更新时间：2026-11-11T18:27:07.632Z
中文译文更新时间：2026-11-13T20:25:53.359Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40eraserlabs/render
原文对照：https://npmcn.com/package/%40eraserlabs/render/?lang=original
项目主页：https://github.com/eraserlabs/eraser-diagrams
源码仓库：https://github.com/eraserlabs/eraser-diagrams

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

- 包体积（解压后）：434 kB，47 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^22\.23\.4 \|\| ^24\.22\.1 \|\| \>=26\.12\.1
- 运行依赖：3 个
- 首次发布：2026-08-19T03:42:00.971Z
- 最新版本发布：2026-11-11T18:27:07.213Z
- 近 30 天下载量：10688（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

内浏览器填充,测量,布局,以及应用Eraser图协议的执行.

## 安装

```sh
npm install @eraserlabs/render
```

也可以使用：`pnpm add @eraserlabs/render`、`yarn add @eraserlabs/render`、`bun add @eraserlabs/render`

## README

# @ eraserlabs/ 放弃

## 导言

`@eraserlabs/render` 是一个内浏览器 一半的渲染管道。 鉴于已解析的元素和一个已准备好的模板库,它会填充标记、挂载和隔离每个模板的CSS,测量浏览器实际制作的框,通过路径连接 `@eraserlabs/layout`,并将结果应用为定位节点加全场SVG覆盖.

它作为自成一体的IIFE在Chromium运行(`@eraserlabs/render/browser/iife`显示为 `window.__eraser`),这就是如何 `@eraserlabs/diagrams` 驱动它。 根导出为节点安全场景类型 `buildHtmlDocument` 并依赖于任何特定浏览器。 可移植元素、图标、模板、角色和字体合同均在 `@eraserlabs/protocol`。 。 。 .

## 为什么

授权的宽度和高度是意图,而不是颜料. 文本包装,粘贴,图标和阴影会改变出行和导出必须遵守的框. 这些测量只有在一个真正的布局引擎运行后才存在,所以这个软件包就活在页面中,而不是在节点中近似CSS.

## 使用量

然后将IIFE插入一页:

```ts
window.__eraser.setup({ templates, baseCss });
await window.__eraser.registerFonts({ css, faces });

const { measures, layout } = await window.__eraser.run({
  entities,
  connections,
  icons,
});

const { scene, css } = window.__eraser.serialize();
```

`setup` 财务报告和审定财务报表 `registerFonts` 是页面寿命. `run` 按请求:填充、挂载、测量、路线、应用. `serialize` 为 HTML 输出路径返回已定位的场景标记和此捆绑的样式表.

授权连接 `points` 是路线 - 本地 `{ x, y }` 来源为连接对象 `x` 编号 : `y`。适配器将其转换为Tuple几何 `@eraserlabs/layout` ;输出多管线仍为场景-空间拖曳.

API 和计量合同在 `SPEC.md`。 。 。 .

## 编辑器 API

`@eraserlabs/render/elements` 使解析子集不挂起、 路由或全局设置 :

```ts
import { createElementRenderer } from '@eraserlabs/render/elements';
import { buildRenderPageSetup } from '@eraserlabs/diagram-templates';

const renderer = createElementRenderer(buildRenderPageSetup(resolver.library));
const result = await resolver.resolve(
  { elements: selection },
  { partial: true },
);
if (!result.ok) throw new Error(JSON.stringify(result.errors));
const fragment = await renderer.render({
  entities: result.entities!,
  connections: result.connections!,
  icons: result.icons!,
});
```

安装 `renderer.css` 挂载 `fragment.defs` 与 HTML 并行。 环绕每个元素 `[data-mdp-tag="<tag>"]`;主机拥有定位和清理. 已解决的主题自动被应用到模板根上. 使用 `applyLayout` 以应用现有的几何学而无需走道.

同样的入门出口 `measureElements(mounted, entities?)` 财务报告和审定财务报表 `measureText(root)`与图书馆CSS和已注册字体连接、未转换的DOM供应; `display:none` 无法测量。 这些呼叫等待字体. 与实体,测量应用了完整的渲染器的缩放政策,并恢复了探针样式;没有它们,它读取了当前布局. 文字测量中包含射程碎片及其结合,而不是一行相加的框或一对矩.

`@eraserlabs/render/fit` 导出同步 `measureElement(wrapper)` 财务报告和审定财务报表 `fitElement(wrapper, constraints)`适当的政策是: `natural`, (中文(简体) ), `fixed`, (中文(简体) ), `content`,以及 `balanced`装配会按探测器的大小进行 宿主决定是否坚持这种几何.

`prepareWashMasters(master, elements, { idPrefix }?)` 在低等填充和变异前准备水彩定义 `props.washSym`。 。 。 . `renderer.render(request, { idPrefix }?)` 处理克隆和准备本身。 保留已挂载的返回定义;可选前缀必须在挂载的碎片中是独一无二的,只使用字母,数字,下划线和连字符. 自动前缀隔开捆绑.

## 常见问题

### @eraserlabs/render 是什么？

内浏览器填充,测量,布局,以及应用Eraser图协议的执行\.

### 如何安装 @eraserlabs/render？

在项目目录运行 npm install @eraserlabs/render，或使用 pnpm add / yarn add / bun add。

### @eraserlabs/render 支持 TypeScript 吗？

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

### @eraserlabs/render 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @eraserlabs/render 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^22\.23\.4 \|\| ^24\.22\.1 \|\| \>=26\.12\.1。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @eraserlabs/render 可以商用吗？

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

### @eraserlabs/render 的下载量有多少？

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

### @eraserlabs/render 还在维护吗？

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