图片放大之后，图片上的点位怎么随着移动

Question

根据后端提供的点位坐标在背景图片上标记出来之后，背景图片会放大缩小，怎么实现坐标点位也还是在背景图片相对的坐标上呢，背景图片放大是百分比，但是点位坐标是px

Answer 1

我感觉这种问题特别简单啊，这种根据对应放大缩小不就行了吗？

举个例子：
设图片大小为
width = 100px
height = 100px
设坐标位置为
x=10px
y=10px
假设图片放大10倍
此时图片的大小
width'= 1000px = 100px * 10
height' = 1000px = 100px * 10
那么响应的坐标也放大10倍
x' = 100px = x * 10
y' = 100px = y * 10
这不就对应上了吗？
也就是很简单的道理图片放大多少倍坐标跟着放大多少倍就行了。
如果不知道放大倍数，求倍数不也是很简单嘛。倍数=放大后图片大小/原图片大小.

归根结底就是些小学的数学应用题。

Answer 2

有两种比较好方案：
1、点位和图片叠加在一起，比如说canvas
2、在图片和点位外加一个div；缩放外面的div
已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

这个和你的放大办法有关，
比如水平放大A倍，竖直放大B倍，则新的点位置就是（Ax,By）

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

可以使用百度 Echarts 图表库的绘图引擎 ZRender，把图片跟标记的点都绘制到一个 Group 里，因为 Group 本身也继承了一个叫做 Transformable 的变换类，所以其本身是可以缩放的，缩放的时候会连同里面的图片跟标记的点一起缩放，这样位置就不会错开了。
如果不使用 ZRender 的话，你可以将缩放的单位设置成图片和点的共同祖先节点，原理也是跟上面一致的。

但是这两种做法都有一个缺陷：缩放的时候点也会跟着变大变小。避免这种情况的方法是自己计算缩放后点的位置：

1. 图片缩放时的变换原点transform-origin（在几何上表现为无论如何变化，这个点跟原来的点是重合的）可以不变化的情况下，把缩放原点设置为[0, 0]，计算方法如楼上所言，就是一个初中数学的难度；
2. 如果图片所方式的变换原点需要变化，比如需要跟随鼠标位置，那么简单的中学数学就搞不定了，可以应用仿射变换，计算出图片缩放的变换矩阵，再应用到点坐标上。

Answer 5

整好做过，提供一点点思路