Fabric 文本/画布 fabric
约 535 字大约 2 分钟
...
2026-09-28
插件说明
@sv-print/plugin-ele-fabric 基于 Fabric.js 的打印元素插件，提供两种元素：
fText（F文本）：基于fabric.Textbox渲染文本，输出 SVG，可配置字号、行高、字体、字重、颜色、字距、背景fabric（Fabric）：自定义画布，用任意 Fabric 对象（Textbox / Triangle / Rect / Circle 等）自由绘制，输出canvas.toSVG()
第三方依赖：fabric。
npm install @sv-print/plugin-ele-fabric示例代码
import pluginFabric from "@sv-print/plugin-ele-fabric";
const plugins = [pluginFabric({})];
await hiprint.register({ plugins }); // 须在创建模板/打开设计器之前fabric 元素通过 fabricDraw 函数字符串自定义绘制（必须返回 SVG 字符串）：
function (title, value, options, templateData, canvas, fabric) {
canvas.add(
new fabric.Textbox("Fabric.js 自定义渲染", {
fontSize: 14,
width: 100,
fill: "red",
splitByGrapheme: true, // 按宽度自动换行
})
);
canvas.add(new fabric.Triangle({ left: 0, top: 20, width: 50, height: 50, fill: "green" }));
canvas.add(new fabric.Rect({ top: 80, left: 4, width: 40, height: 40, fill: "#f55" }));
return canvas.toSVG(); // 必须返回 SVG 字符串
}高级用法
元素参数
| 参数 | 说明 | 默认值 |
|---|---|---|
fFontSize | fText 字号（最小 6） | 12 |
fLineHeight | fText 行高 | 1.16 |
fontFamily / fontWeight / color / letterSpacing / backgroundColor | fText 样式参数 | - |
fabricDraw | 自定义绘制函数字符串，签名 (title, value, options, templateData, canvas, fabric)，必须返回 SVG 字符串（如 canvas.toSVG()） | - |
说明
- fText 注意使用
fFontSize/fLineHeight，不是内核的fontSize/lineHeight - fText 默认
splitByGrapheme: true按元素宽度自动换行；绑定field时打印字段值，支持formatter自定义内容 fabricDraw可配置在元素参数或元素类型（printElementType）上，元素参数优先- 渲染产出为 SVG 字符串直接内嵌 DOM，打印/导出矢量无损
版权所有
版权归属：sv-print