@liuzhiwo/bleed-generator

包装盒刀版出血线生成器。给定割线（cut line）SVG path，向外扩张指定距离生成出血线。提供两个独立实现和 1 个轮廓清理工具：

| API | 底层 | 适用场景 | |---|---|---| | BleedGenerator | makerjs | 通用，包含曲线/圆弧等复杂路径 | | BleedGeneratorV2 | js-clipper | 多边形路径更可靠，速度更快 | | generateBleedOutlinePath | DOM（getBBox） | 从多段出血线中挑出面积最大的外轮廓 |

特性

• 单例模式：全局复用一个实例 + LRU 风格缓存
• 零配置：默认出血距离 2mm（按 pt 计算：72/25.4 × 2）
• 框架无关：纯 TypeScript，无 Vue/React 依赖
• SSR 友好：generateBleedOutlinePath 内置 typeof document === 'undefined' 守卫，Node 环境调用返回原路径不崩溃

安装

# npm
npm i @liuzhiwo/bleed-generator

# pnpm
pnpm add @liuzhiwo/bleed-generator

# yarn
yarn add @liuzhiwo/bleed-generator

安装会自动带上 makerjs 和 js-clipper 作为依赖。

快速上手

import { BleedGenerator, BleedGeneratorV2, generateBleedOutlinePath } from '@liuzhiwo/bleed-generator'

const cutPath = 'M 0 0 L 100 0 L 100 100 L 0 100 Z'

// 1. 用 makerjs 生成
const bleed1 = BleedGenerator.getInstance().generate(cutPath)

// 2. 用 js-clipper 生成（多边形更稳）
const bleed2 = BleedGeneratorV2.getInstance().generate(cutPath)

// 3. 自定义出血距离（pt）
const bleed3 = BleedGenerator.getInstance().generate(cutPath, 5)

API

BleedGenerator.getInstance()

获取单例。基于 makerjs.model.outline 实现路径扩张。

.generate(cutPathData: string, bleedPt?: number): string

• cutPathData：SVG path 字符串
• bleedPt：出血距离，单位 pt。默认 (72/25.4) * 2（2mm）
• 返回：扩张后的 SVG path 字符串

.clearCache(): void

清空内部缓存。

BleedGeneratorV2.getInstance()

获取单例。基于 ClipperLib.ClipperOffset + jtMiter + etClosedPolygon 实现路径扩张，自动采样圆弧/贝塞尔曲线为多边形。

API 与 BleedGenerator 一致。

generateBleedOutlinePath(pathLine: { build(): string }): string

⚠️ 需要 DOM 环境（用 path.getBBox() 计算面积）。Node 环境会自动 fallback 到字符串最长的那段。

输入一个带 build() 方法的对象（如 SvgPathBuilder 实例），返回出血线中外轮廓最大的一段。

License

MIT