最近再做 webcad , 需要在 canvas 上对图形进行缩放,主要分为以下几个步骤:
1、找到当前光标所在位置,确定其在相对 canvas 坐标系的坐标
绑定鼠标滚轮事件,假定每次缩放比例 0.2
求鼠标相对坐标 p0
2、图形由点组成,对每个点进行矩阵变换,得到变换后的坐标,假设图中一点为 p1:
v1 = p1 - p0 // 将 p0 作为变换图形的原点
p1 = v1.scale(x_ratio, y_ratio) // 缩放
p1 = p1 p0 // 还原坐标点
3、清除当前图形,绘制新图形
通过以上步骤可实现以鼠标当前位置为中心,缩放图像。 以上为实现的基本思路, 代码后期补上。