问题的关键，其实就在于标记点坐标没有随着图片的实际渲染尺寸进行动态换算：外层需要用view包住image并监听@load，再通过createSelectorQuery拿到真实宽高，随后按比例把原始坐标重新映射；每个hotspot也必须拥有各自独立的状态字段，并且通过:key绑定唯一id；到了swiper切换时，旧坐标要先清空，再重新计算，这一步绝对不能省略。
标记点坐标为什么总偏移？
根本原因在于，很多人直接用 position: absolute 固定 left/top，却没有考虑 mode（如 aspectFill、scaleToFill）以及图片最终的实际渲染尺寸。原始坐标（例如后端返回的 {x: 240, y: 180}，原图尺寸为 800×600）必须根据屏幕上的真实显示宽高按比例换算，否则一旦切换图片或修改 mode，标记点就一定会发生偏移。
正确做法：
- 使用 position: relative
- 标记点 position: absolute
- 必须监听 @load 事件，借助 uni.createSelectorQuery() 获取 image 和 wrapper 的实际宽高
- 计算缩放比例：scaleX = wrapperWidth / imageNaturalWidth，scaleY = wrapperHeight / imageNaturalHeight
- 最终坐标换算为：left = originalX * scaleX、top = originalY * scaleY
点击状态为什么全量联动？
如果写成 :class="{ active: isHotspotActive } 这样的全局布尔值，就会导致所有标记点一起高亮或变色——因为 Vue 无法区分你点击的究竟是哪一个点。
必须为每个图片标记点设置独立状态字段：
- 后端返回的数据数组中要带唯一 id 字段（例如 "id": "hs_001"）
- 前端数据结构中加入 isMarked: false，例如：{ id: 'hs_001', x: 240, y: 180, isMarked: false }
- 在 v-for="(point, index) in hotspotList" 遍历时，绑定 :key="point.id"
- 点击事件传入 point.id，然后执行：this.hotspotList.find(p => p.id === id).isMarked = !isMarked
swiper 切换后标记点错位怎么办？
当 swiper 复用 item 或重新加载 image 时，旧的 hotspot DOM 可能仍然保留上一页的坐标信息，如果不先清理，就很容易出现漂移、重叠甚至显示错乱的问题。
必须在 @change 回调中完成三件事：
- 先清空当前所有 hotspot 的 left/top 行内样式（例如通过 ref 或 class 批量 removeAttribute）
- 对当前页的 @load，或者主动重新获取尺寸
- 获取到新的图片尺寸后，重新计算并设置每个点的 left/top
- 动画效果优先使用 transform: translate(x, y) + transition，尽量不要频繁直接修改 left/top（可减少 layout thrashing）
为什么图片一缩放标记就失效？
这是因为 mode 会控制裁剪和拉伸方式，但它的视觉显示区域与 DOM 尺寸并不一定完全一致。比如 aspectFill 会裁切边缘，scaleToFill 会拉伸变形，这种情况下原始坐标和实际显示位置之间的映射关系就会失真，导致图片标记位置失效。
关键应对点：
- 不要直接拿图片的 width/height 属性值来计算，真正可靠的是通过 createSelectorQuery 获取渲染完成后的实际尺寸
- 如果后端返回的只有原始坐标，那么必须同时提供原图宽高（originalWidth/originalHeight）；缺少这两个值，就无法准确进行比例换算
- 不要在 onReady 阶段就急着计算坐标——此时 image 很可能还没有加载完成，获取到的尺寸自然可能是 0
- 调试时最直接高效的方法，就是输出 console.log(wrapperRect, imageRect)，比反复猜测“是不是 mode 设置错了”更容易快速定位问题
