P0-04 · canvas + board + layers 迁移(Graphics / Sprite / name→label)
- Phase / ID: P0 / P0-04
- Depends on: P0-02
- Files:
src/canvas/index.ts、src/board/index.ts、src/layers/index.ts、src/layers/{scale,rotate,drag}.ts、src/painter.ts(name=处) - Effort: M
- Status: 🟡 deprecation 清理(非阻断) —— 这些是长寿命 overlay(选框 / 手柄 / mask / 背景),会活到 raster 架构之后(见 D7),值得消除 deprecation 警告;但 v7 写法在 v8 仍能跑,不阻断,可排在 P0-02 / P0-06 之后再做。
Context
把视图层与图层手柄的 v7 Graphics / name 用法迁到 v8(name→label、beginFill / drawX→rect / circle / fill / stroke)。这些对象在 P1 之后仍在用,所以清理不会白做。可与 P0-03 并行(不同文件)。
Steps
name→label:全量替换.name = '...'→.label = '...'(painter.tsstage/boundingBoxes、canvas、board、layers的所有name赋值)。注意event.target.name这类读取也一并改label。canvas/index.ts:canvasShape:beginFill(0xFFFFFF).drawRect(...).endFill()→rect(...).fill(0xFFFFFF)。clone()在 v8Graphics仍可用;若行为异常,改为重画一个相同rect().fill()。mask用法不变。
layers/index.ts:boundingBox的lineStyle(1,0x3D5CAA).drawRect(...)→rect(...).stroke({ width: 1, color: 0x3D5CAA });控制点的beginFill(0xFFFFFF,0.5).drawRect(...).endFill()→rect(...).fill({ color: 0xFFFFFF, alpha: 0.5 });rotate 连线moveTo/lineTo后.stroke(...)。- 控制点
Sprite(Texture.WHITE):Texture.WHITEv8 仍在,保留。 Texture.from(deleteBinSvg):v8 对 SVG 字符串 / data-uri 的Texture.from行为可能不同,优先改await Assets.load(deleteBinSvg);若deleteBinSvg是内联 SVG 字符串,转成 data-uri 或走Assets。验证删除图标能正常显示。
layers/{scale,rotate,drag}.ts、board/drag.ts:核对其中是否有lineStyle/drawX/name,一并迁移。
Acceptance
- [ ]
pnpm -F pixi-painter typecheck通过;全仓rg "\.name\s*=" packages/pixi-painter/src不再有 Pixi 对象赋值残留。 - [ ]
examples/vue:导入图片后出现选择框 + 8 个缩放点 + 旋转手柄 + 删除图标(图标可见);缩放 / 旋转 / 拖拽 / 删除均工作。 - [ ] 画布背景与 mask 裁剪正常。
Out of scope
- 把
EditableLayer改造成真正的栅格绘画图层(→ P1/P5)。