【实战】Vue+Canvas 实现标注组件

在工业质检、图像标注等场景中，基于 Canvas 的自定义标注组件是高频需求，而缩放 + 平移 + 标注同步是这类组件的核心难点。本文将分享如何基于 Vue 实现父子组件联动的可缩放标注组件，解决标注随缩放偏移、鼠标中心缩放、Pan 平移等核心问题。

一、需求背景与核心痛点

1. 核心需求

• 支持矩形、直线、多边形、点四种标注类型；
• 支持鼠标滚轮中心缩放、按钮缩放、重置缩放比例；
• 支持 Pan 平移模式，拖拽移动图片；
• 标注随图片缩放实时同步，无偏移、无拉伸；
• 父子组件解耦：父组件负责控制逻辑和数据管理，子组件负责 Canvas 绘制和交互。

2. 常见痛点

• 缩放后标注坐标偏移，与图片相对位置不一致；
• 鼠标滚轮缩放不以鼠标为中心，体验差；
• Pan 平移与标注绘制逻辑冲突；
• 父子组件缩放状态不同步，控制面板显示的缩放比例与实际不符。

二、核心设计思路

1. 父子组件职责划分