canvas 图像旋转与翻转姿势解锁

多图预警,数学不好可直接跳至文末小结。

需求背景

从一个游戏需求说起:
需求背景

  1. 技术选型:canvas
    上图所展示的游戏场景,“可乐瓶”里有多个“气泡”,需要设置不同的动画效果,且涉及 deviceOrientation 的交互,需要有大量计算改变元素状态。从性能方面考虑,canvas 是不二的选择。
  2. 技术点:canvas 绘制图像
    通过对游戏场景的进一步分析,可见场景中的“气泡”元素形状都是相同的,且不规则,通过 canvas 直接绘制形状实现成本较高,因此需要在 canvas 上绘制图像。
  3. 技术点:canvas 图像旋转与翻转
    虽然“气泡”元素是相同的,可以使用相同的图像,但图像需要多个角度/多个方向展示,因此需要对图像进行相应的旋转与翻转(镜像),这也是本文所要介绍的重点。

后文代码以下图左侧绿框的“气泡”为示例,右侧展示了场景中用到的两个图像:
需求背景

认识 canvas 坐标系

canvas 上图像的旋转和翻转,常见的做法是将 canvas 坐标系统进行变换。因此,我们需要先认识 canvas 坐标系统:
canvas 坐标系
由上图可得,canvas 2D 环境中坐标系统和 Web 的坐标系统是一致的,有以下几个特点:

  1. 坐标原点 (0,0) 在左上角
  2. X坐标向右方增长
  3. Y坐标向下方延伸

回到上述需求中,我们获取 canvas 对象并设置相应的宽高:

此时,canvas 的坐标系统如下图所示:
coke 坐标系

在 canvas 上绘制图像

在 canvas 上绘制图像,可以使用 drawImage() 方法,语法如下(详细用法参见 MDN):

需要注意的是,图像必须加载完毕,才能绘制到 canvas 上,否则会出现空白:

此时,便可以 canvas 上看到一个未旋转/翻转的“气泡”图像,如下图所示:
绘制图像

canvas 坐标变换

接下来,我们再来了解 canvas 坐标的变换。上述需求仅涉及 2D 绘制上下文,因此仅介绍 2D 绘制上下文支持的各种变换:

  1. 平移 translate:

    translate() 方法接受两个参数。x 是左右偏移量,y 是上下偏移量。

  2. 旋转 rotate:

    rotate() 方法只接受一个参数。旋转的角度 angle,它是顺时针方向的,以弧度为单位的值。

  3. 缩放 scale:

    scale() 方法接受两个参数。x 和 y 分别是横轴和纵轴的缩放因子。其缩放因子默认是 1,如果比 1 小是缩小,如果比 1 大则放大。

  4. 变形 transform:

    transform() 方法是对当前坐标系进行矩阵变换。

    setTransform() 方法重置变形矩阵。先将当前的矩阵重置为单位矩阵(即默认的坐标系),再用相同的参数调用 transform() 方法设置矩阵。
    以上两个方法均接受六个参数,具体如下:

参数 含义
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

图像旋转的实现

图像旋转
上图所示“气泡”,宽为 160,高为 192,x 轴方向距离原点 512,y 轴方向距离原点 220,逆时针旋转 35 度。
要绘制该“气泡”,需要先将坐标系平移(translate),再旋转(rotate)。具体实现步骤如下:
图像旋转

save() 方法与 restore() 方法:

  1. save() 方法用来保存 Canvas 状态的,没有参数。每一次调用 save() 方法,当前的状态就会被推入栈中保存起来。当前状态包括:
    • 当前应用的变形(移动/旋转/缩放)
    • strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
    • 当前的裁切路径(clipping path)
  2. restore() 方法用来恢复 Canvas 状态,没有参数。每一次调用 restore() 方法,上一个保存的状态就从栈中弹出,所有设定都恢复。
  3. 状态保存在栈中,可以嵌套使用 save() 与 restore()。

图像翻转的实现

图像翻转
上图所示“气泡”,宽为 160,高为 192,x 轴方向距离原点 172,y 轴方向距离原点 365,顺时针旋转 35 度。
要绘制该“气泡”,需要先将坐标系统平移(translate),翻转(scale),平移(translate),再旋转(rotate)。具体实现步骤如下:
图像翻转1
至此,实现了“气泡”的镜像翻转,但翻转后的“气泡”还需要旋转特定的角度,在方法一的基础上继续对坐标系统进行变换:
图像翻转2
以上操作中进行了两次平移(translate)操作,可以进行合并简化:
图像翻转3

坐标系统的矩阵变换

前文介绍了 2D 绘制上下文变形(transform)变换,实际是直接修改变换的矩阵,它可以实现前面介绍的平移(translate)/旋转(rotate)/缩放( scale)变换,还可以实现切变/镜像反射变换等。矩阵计算遵循数学矩阵公式规则:
矩阵变换
由上公式可得:

矩阵变换可实现以下变换效果:

  1. 平移 translate:

    平移

  2. 旋转 rotate:

    旋转

  3. 缩放 scale:

    缩放和拉伸

  4. 切变

    切变

  5. 镜像反射

    镜像反射

结合上述公式,可推导出图像旋转和翻转的矩阵变换实现:

  1. 图像旋转:
    图像旋转
  2. 图像翻转:
    图像翻转
  3. 图像镜像反射(翻转+旋转):
    图像旋转&翻转

像素操作实现图像翻转

除了坐标系统变换,canvas 的像素操作同样可以实现图像的翻转。首先需要了解下 getImageData() 方法(详细用法参见MDN)和 putImageData()(详细用法参见MDN)方法:

  1. getImageData()
    CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象,用来描述 canvas 区域隐含的像素数据,这个区域通过矩形表示,起始点为 (sx, sy)、宽为 sw、高为 sh。
  2. putImageData()
    CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。 如果提供了脏矩形,只能绘制矩形的像素。

水平翻转实现:

小结

至此,小编的数学姿势又恢复到了高考水平。

  1. 图像旋转:
    • 基础变换法:

    • 矩阵变换法:

  2. 图像翻转:
    • 基础变换法:

    • 矩阵变换法:

    • 像素操作法:

  3. 图像镜像对称(翻转+旋转):
    • 基础变换法:

    • 矩阵变换法:

参考文章

说明:本文讨论的 canvas 环境均为 2D 环境。若有更好的实现方式,欢迎留言告知。

1 4 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部