类似百度地图的 放大缩小功能 的 坐标重定位问题

需求:

比如在百度地图中针对某一坐标点  滚轴滚动进行  缩放。之前针对的那个点的 还保持在鼠标对应位置。


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 就能保证前后一致了



你可能感兴趣的:(类似百度地图的 放大缩小功能 的 坐标重定位问题)