canvas高亮必须重绘：清空画布→分组绘制非选中与选中图形→结合描边、填充、发光等视觉强化→通过set管理选中id并隔离交互与渲染以保性能。
Canvas 本身不保存图形状态，选中高亮必须靠重绘实现——不是“加个class”，而是重新绘制被选中的图形，用不同颜色、线宽或样式覆盖原图。
选中即重绘：核心逻辑不能绕开
Canvas 是位图渲染，没有 DOM 那样的“选中态”属性。所谓“高亮”，本质是：清掉旧图 → 按新样式重画目标图形 → 其余图形照常绘制。整个过程需在单次渲染帧内完成，否则会出现闪烁或残留。
- 每次点击后，先 clearRect(0, 0, canvas.width, canvas.height) 清空画布（或只清局部区域）
- 遍历所有图形数据，对非选中项按默认样式绘制；对选中项，改用高亮色、加粗描边（如
ctx.lineWidth = 4）、添加外发光（可用两次 drawImage + shadowBlur 模拟） - 避免在循环中反复切换 ctx 属性（如 strokeStyle、lineWidth），可提前分组绘制：先画所有普通图形，再单独画高亮图形
支持多选时的绘制优化
多选不是叠加多个高亮效果，而是统一管理选中集合，再批量重绘。关键在于减少重复计算和冗余绘制。
- 维护一个 selectedIds = new Set()，点击时 toggle ID，而非每次都遍历全部图形判断是否“靠近鼠标”
- 绘制时，先画背景/网格/非选中图形；再集中绘制所有选中图形，共用一套高亮配置（比如统一描边宽度、阴影偏移）
- 若选中图形数量较多（>20），可考虑用离屏 Canvas 预渲染高亮样式，再整体 drawImage 到主画布，避免主线程频繁路径操作
视觉增强技巧：让高亮更明确
单纯变色容易被忽略，结合多种视觉信号能显著提升识别度。
-
描边+填充双强化：例如圆圈选中时，用深色描边（2px）+ 浅色填充（透明度 0.3）+ 外发光（
ctx.shadowColor+shadowBlur=6） - 动态反馈：点击瞬间可短暂缩放（1.05×）或轻微抖动（canvas transform 实现），松开后回归常态，增强交互感
- 边缘强调：对线段类图形，选中时不仅加粗，还可在线段两端加实心圆点（radius=4），强化端点存在感
性能兜底：别让高亮拖慢响应
高亮逻辑一旦嵌套在每帧动画里，极易引发卡顿。必须隔离交互与渲染节奏。
- 鼠标点击检测和选中判定（距离计算等）放在事件回调中完成，**不要塞进 requestAnimationFrame 循环**
- 高亮重绘只触发一次，除非用户再次点击或取消；不要为“悬停”实时计算并重绘（Canvas 悬停检测成本高，建议仅用于按钮类简单图形）
- 图形超 100 个时，启用空间索引（如四叉树）加速点击判定，但高亮绘制仍保持“只重绘目标”，不因索引结构增加绘制负担
