canvas中的二维相机

前言

学习目标

• 创建相机对象
• 平移视口
• 缩放视口

知识点

• 二维视图投影矩阵

前情回顾

之前我们canvas的矩阵变换原理，接下来我们就可以创建图形对象了，我们先写个相机练练手。

1-相机的功能分析

我们之前做架构的时候说过，相机的功能是变换视图。

二维相机要比三维相机简单很多，只要实现其位移和缩放视口的功能即可。

不过，二维相机虽然简单，其投影视图矩阵的概念依旧存在。

2-相机的代码实现

其整体代码如下：

• /src/lmm/core/Camera.ts

import { Matrix3 } from '../math/Matrix3'
import { Vector2 } from '../math/Vector2'

class Camera {
    position: Vector2
    zoom: number

    constructor(x = 0, y = 0, zoom = 1) {
        this.position = new Vector2(x, y)
        this.zoom = zoom
    }
    /* 视图投影矩阵：先逆向缩放，再逆向位置 */
    get pvMatrix() {
        const {
            position: { x, y },
            zoom,
        } = this
        return new Matrix3().scale(1 / zoom).translate(-x, -y)
    }
    /* 使用视图投影矩阵变换物体*/
    transformInvert(ctx: CanvasRenderingContext2D) {
        const {
            position: { x, y },
            zoom,
        } = this
        const scale = 1 / zoom
        ctx.translate(-x, -y)
        ctx.scale(scale, scale)
    }
}
export { Camera }

当前相机有两个属性：

• position：相机的位置。
• zoom：相机视口的缩放。

再看一下其方法。

pvMatrix() ：视图投影矩阵。

get pvMatrix() {
    const {
        position: { x, y },
        zoom,
    } = this
    return new Matrix3().scale(1 / zoom).translate(-x, -y)
}

其变换物体的顺序是这样的：先逆向缩放物体，再逆向位移物体。

矩阵相乘的顺序很重要，需深度理解，不要搞混。

transformInvert() 是对物体进行逆向变换，其变换原理和计算视图投影矩阵的原理一样。

/* 使用视图投影矩阵变换物体*/
transformInvert(ctx: CanvasRenderingContext2D) {
    const {
        position: { x, y },
        zoom,
    } = this
    const scale = 1 / zoom
    ctx.translate(-x, -y)
    ctx.scale(scale, scale)
}

总结

相机的概念可以让我们更系统的架构图形项目。

有人会因为其简单，把它放到了模型矩阵里，这是不可取的。