canvas 鼠标位置缩放图形

2019-02-25 11:10:52 浏览数 (1)

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

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

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

  求鼠标相对坐标 p0

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

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

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

  p1 = p1 p0                       // 还原坐标点 

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

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

0 人点赞