canvas 鼠标位置缩放图形

最近再做 webcad , 需要在 canvas  上对图形进行缩放，主要分为以下几个步骤:

1、找到当前光标所在位置，确定其在相对 canvas 坐标系的坐标

　　绑定鼠标滚轮事件,假定每次缩放比例 0.2

　　求鼠标相对坐标 p0

2、图形由点组成，对每个点进行矩阵变换，得到变换后的坐标，假设图中一点为 p1:

　　v1 = p1 - p0   // 将 p0 作为变换图形的原点

　　p1 = v1.scale(x_ratio, y_ratio)   // 缩放

　　p1 = p1 + p0                       // 还原坐标点 

3、清除当前图形，绘制新图形

通过以上步骤可实现以鼠标当前位置为中心，缩放图像。 以上为实现的基本思路， 代码后期补上。