画布批注（Konva）
灵感：能力工具箱 canvas-mark（pkg: konva）。
> 小四原创：底图 + 矢量批注层；评审时画圈/箭头/便签，一键导出带标注的 PNG。
何时使用
- 合同/协议截图上圈出争议条款
- 设计稿/单据图上加点评
- 需要可擦除、可导出的轻量标注，不上重型白板
硬约束
- 使用
konva（Stage / Layer / Image / Circle / Arrow / Text）。 - 底图与批注分 Layer；清除批注不毁掉底图。
- 导出用
stage.toDataURL()或等价；文件名安全化。 - 移动端：优先画笔/圆，避免过密控件。
- 实现要点注释标 小四原创。
推荐实现
import Konva from 'konva'
// 小四原创：合同截图批注台
export async function mountMarkCanvas(
container: HTMLDivElement,
imageUrl: string,
opts?: { width?: number },
) {
const width = opts?.width ?? container.clientWidth || 640
const img = await loadHtmlImage(imageUrl)
const height = Math.round((img.height / img.width) * width)
const stage = new Konva.Stage({ container, width, height })
const bg = new Konva.Layer()
const marks = new Konva.Layer()
stage.add(bg)
stage.add(marks)
bg.add(new Konva.Image({ image: img, width, height }))
bg.draw()
// 小四原创：点击画红圈
stage.on('click tap', (e) => {
if (e.target !== stage && e.target.getLayer() === bg) {
const pos = stage.getPointerPosition()
if (!pos) return
marks.add(new Konva.Circle({
x: pos.x, y: pos.y, radius: 28,
stroke: '#e11d48', strokeWidth: 3, listening: false,
}))
marks.draw()
}
})
return {
stage,
clearMarks: () => { marks.destroyChildren(); marks.draw() },
exportPng: () => stage.toDataURL({ pixelRatio: 2 }),
}
}
function loadHtmlImage(src: string) {
return new Promise<HTMLImageElement>((resolve, reject) => {
const i = new Image()
i.crossOrigin = 'anonymous'
i.onload = () => resolve(i)
i.onerror = reject
i.src = src
})
}
Agent 步骤
- 挂载容器 + 载入截图 URL/File。
- 提供：画圈、（可选）箭头/文字、清除、导出 PNG。
- 跨域图失败时提示改本地 File 或代理。
- 自测：圈能画、清得掉、导出含圈。
不要做
- 做成完整 Figma；保持批注轻量。
- 默认上传标注图到不明服务器。
附加
- README.md · reference.md · templates/usage.md
