实现在光标位置缩放画布的效果可以理解为,光标所对应到画布上的坐标点在缩放之前和之后都继续对应在光标所在的位置。而一般缩放画布,画布会以画布的左上角为固定点缩放,即画布大小变化后,左上角的位置不会发生变化。因此光标对应画布上的点在缩放后并不在原来的位置,而是发生了位移。因此把这个位移倒着移动回去,就实现了在光标位置点缩放画布的效果了。在任何系统平台上都可以按照这个原理实现在光标点缩放画布的效果。
验证“画布会以画布的左上角为固定点缩放”的方法: 在你实现了画布缩放之后,把鼠标光标移动到画布的左上角点上,然后滚动滑轮缩放,看画布是否是在鼠标点位置做放大缩小变化。如果是,那么说明你的缩放算法也是以画布左上角为原点缩放的。
这个算法的计算方法在各个平台重新按照这个计算步骤计算都可以实现光标点缩放画布的效果。 注:这里的实现为缩放参照点为左上角的点,比如放大,则会使矩形向右和向下放心延伸实现放大。
a.计算原理:
- 找到光标所对应到画布坐标系统的位置点,记为p0
- 缩放
- 找到缩放后步骤1中光标所对应画布点的新位置坐标点,记为p1
- 计算p1点到p0点的位移量,包括x方向位移量move_len_x 和y方向位移量move_len_y
- 把计算好的位移量应用到画布的位置移动上,从而实现缩放后画布上的点p1移动回去到p0,实现了光标位置缩放画布。
b.计算步骤:
-
获取p0 因为p0是值在画布中的坐标,而鼠标所在的坐标为窗口的坐标,分别为两个独立的坐标系,因此要根据鼠标在显示窗口的坐标计算出对应到画布坐标系上所对应的坐标 p0.x = p3.x - p2.x p0.y = p3.y - p2.y 即 p0(x, y) = (p3.x - p2.x, p3.y - p2.y)
-
缩放的算法请参考源代码,原理是把画布的长宽按照比例放大或缩小并重新绘制
-
计算p1点坐标,在图1所示可知: L0 = p0.x L2 = p0.y L1 = L0 * 缩放比例 L3 = L2 * 缩放比例 p1(x, y) = (L1, L3);
-
计算位移量 move_len_x = p1.x - p0.x; move_len_y = p1.y - p0.y;
-
移动画布 p2.x = p2.x - move_len_x; p2.y = p2.y - move_len_y;