在工业质检、图像标注等场景中，基于 Canvas 的自定义标注组件是高频需求，而缩放 + 平移 + 标注同步是这类组件的核心难点。本文将分享如何基于 Vue 实现父子组件联动的可缩放标注组件，解决标注随缩放偏移、鼠标中心缩放、Pan 平移等核心问题。
一、需求背景与核心痛点
1. 核心需求
- 支持矩形、直线、多边形、点四种标注类型；
- 支持鼠标滚轮中心缩放、按钮缩放、重置缩放比例；
- 支持 Pan 平移模式，拖拽移动图片；
- 标注随图片缩放实时同步，无偏移、无拉伸；
- 父子组件解耦：父组件负责控制逻辑和数据管理，子组件负责 Canvas 绘制和交互。
2. 常见痛点
- 缩放后标注坐标偏移，与图片相对位置不一致；
- 鼠标滚轮缩放不以鼠标为中心，体验差；
- Pan 平移与标注绘制逻辑冲突；
- 父子组件缩放状态不同步，控制面板显示的缩放比例与实际不符。
二、核心设计思路
1. 父子组件职责划分
| 组件 | 核心职责 | 关键交互 |
|---|---|---|
| 父组件 | 1. 控制面板渲染（缩放开关、操作类型、功能按钮）2. 缩放参数配置（步长、最大 / 最小比例）3. 标注数据管理（增删改查、持久化） | 1. 向子组件传递缩放配置 Props2. 调用子组件缩放 / 标注方法3. 监听子组件缩放状态回调 |
| 子组件 |
)
