需求:
比如在百度地图中针对某一坐标点 滚轴滚动进行 缩放。之前针对的那个点的 还保持在鼠标对应位置。
svg中新坐标算法
transform的 translate 和 scale 属性的设置
translate 是坐标平移换算,scale是坐标倍数换算
我们只针对 x方向 坐标 计算(y方向同理)
鼠标在svg当前坐标 e.offsetX (svg要是position:absolute哦)设为变量X
当前平移 设为 t1 , 当前 缩放比例 为 s1
则倍数 缩放后 比例为 s2
求缩放后如何 设置 平移坐标 t2 以补全 缩放带来的偏移 保证 鼠标指向的仍然是之前的位置
鼠标执行的某个位置 的实际鼠标为 (x-t)/s
得 (x-t1)/s1=(x-t2)/s2 (x为鼠标位置 ,前后未发生变化)
t2=x-(x-t1)*(s2/s1) (s2/s1 为本次缩放的倍数)
把平移坐标设为t2 就能保证前后一致了