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、清除当前图形,绘制新图形

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券