js 以鼠标为中心缩放图片

原理

使用的绘制方法

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

参数说明:

dx
image的左上角在目标canvas上 X 轴坐标。
dy
image的左上角在目标canvas上 Y 轴坐标。
dWidth(可选)
image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
dHeight(可选)
image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。

其中可视窗口就是canvas元素的实际大小, 超出的部分不可见. 以canvas的左上角建立坐标系.

实际上的目标就是将缩放图上的先前的鼠标点, 移动到鼠标位置, 也就是求上图的dx与dy

最后得到公式:
d x = ( 1 − s s ′ ) ( x o − x l ) d y = ( 1 − s s ′ ) ( y o − y l ) \begin{aligned} dx = (1-\frac{s}{s'})(x_o-x_l)\\ dy = (1-\frac{s}{s'})(y_o-y_l) \end{aligned}