当使用transform scale时，怎么确定其在页面中的位置

Question

我现在有张图片是可以拖拽移动和放大缩小的，在图片左上角有一段说明是动态显示信息的，必须且仅显示在图片的左上角。

<img
  :src="src"
  :width="picW"
  :height="picH"
  :style="{ transform: picTransform, top: picTop ,left:picLeft }"
  @mousedown.prevent="mousedown($event)"
  @mousemove.prevent="mousemove($event)"
  @mouseup.prevent="mouseup($event)"
  @mousewheel.prevent="mousewheel($event)"
  @load="onload"
>
<span 
:style="{ top: picTop ,left:picLeft,position:'absolute' }">
  {{ info }}
</span>

当图片放大缩小后，在页面效果中，其位置是有变化的，但是left和top值没变，那么图片放大缩小时，我该如何调整 span位置

Answer 1

元素的变换(transform)是有一个变换原点(transform-origin)的，作为变换矩阵所在坐标系的原点，在缩放、旋转前后这个点的位置是重合的，此原点的坐标以元素的定位为基准，默认是在元素的中心位置。
所以给你一个思路：span 的中心位置与此图片的原点重合，然后通过 transform 调整到你需要的位置，图片 transform 的时候，同步调整 span 的 transform 参数，我猜在未变换时的基础上乘以放大倍数就行了。