小四画布批注

评审标注的轻量痛点

在合同审查、设计稿走查、单据核对这类场景里，我们经常需要在一张截图上做标注：圈出争议条款、画个箭头指向问题位置、贴一条便签写上修改意见。这不是要改设计稿，也不是要协作画板，而是要一个"看一眼、标一下、导出来"的快速通道。

重型工具的问题在于过重：打开Figma、建Frame、导入图片、配置权限……等标完一圈，审查会早就结束了。而系统截图工具又太弱：画完就不能改，导出后背景带杂色，箭头和文字混在一起分不清层级。我们需要的是底图不变、批注可擦除、导出带标注的干净PNG。

用Konva做两层分离

画布批注的思路很直接：用Stage承载整个画布，底下一层Layer放原始图片（底图），上面一层Layer放矢量标注（圆圈、箭头、文字）。两层互不干扰——清除批注时，底图纹丝不动；调整标注时，不需要重新加载图片。

标注工具覆盖了评审里最常用的三类：

• 画圈：自由手绘闭合曲线，适合圈出重点区域
• 箭头：从一点指向另一点，标出关联关系
• 文字：短备注或说明，避免长篇大论

导出走的是stage.toDataURL()这条路，拿到的是包含所有可见图层的base64数据。文件名在拼接时做了安全化处理，避免路径穿越或特殊字符导致下载失败。

Agent侧的流程是四步走：挂载容器→载入截图→提供标注工具栏→导出PNG。如果图片是跨域URL加载失败，会提示你改用本地File对象或走代理，而不是静默吞掉错误。

边界和别做的事

这个技能不试图替代Figma。它没有图层管理、没有组件库、没有多人协作——它就是一个"打开→画→导出"的单线程标注器。如果你的工作流需要版本对比、分支评审或设计规范对齐，请去用完整的设计工具。

另一条硬边界是不上传。所有标注都在本地浏览器完成，导出的PNG也留在你手里。默认不会把标注图发送到任何不明服务器。如果你需要团队协作共享，可以导出后再手动上传到你信任的平台。

移动端方面，控件密度做了缩减：优先保证画笔和圆圈可用，文字和箭头在小屏幕上操作空间有限，建议在桌面端做复杂标注。