Android UICanvas 画布 ⑧ ( Canvas 绘图坐标系 2x2 矩阵 | Canvas 绘图坐标系 3x3 操作矩阵 )

Posted 2022-07-16 韩曙亮

文章目录

• 一、Canvas 绘图坐标系 2x2 矩阵
• 二、Canvas 绘图坐标系 3x3 操作矩阵

Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ;

其中 图层栈 又称为 Layer 栈 ;

Canvas 画布中 , 有 $2$ 套坐标系 , 分别是 :

• Canvas 自身坐标系
• Canvas 绘图坐标系

一、Canvas 绘图坐标系 2x2 矩阵

---

在 Canvas 绘制矩形的过程中 , 最终调用的是 BaseCanvas#nDrawRect 方法 ,

    private static native void nDrawRect(long nativeCanvas, float left, float top, float right,
            float bottom, long nativePaint);

最终的 左上右下 Canvas 绘图坐标系 中的坐标数据 , 也就是上述 BaseCanvas#nDrawRect 方法的 float left, float top, float right, float bottom 参数 , 会被转为一个 $2\times 2$ 的 Matrix 矩阵 ;

该 $2\times 2$ 的 Matrix 矩阵 用于存储 Canvas 绘图坐标系 ;

Canvas 绘图坐标系 可以通过调用 Canvas#translate 平移 , Canvas#rotate 旋转 , Canvas#scale 缩放 , Canvas#skew 扭曲斜拉 等方法 进行改变 ;

二、Canvas 绘图坐标系 3x3 操作矩阵

---

Canvas#translate 平移 , Canvas#rotate 旋转 , Canvas#scale 缩放 , Canvas#skew 扭曲斜拉 等操作数据 , 会被封装到一个 $3\times 3$ 的 Matrix 矩阵 中 , 该矩阵中有 $9$ 个参数 , 用于记录上述 $4$ 种操作数值 :

• cosX -sinX translateX
• sinX cosX translateY
• 0 0 scale

其中 sinX 和 cosX 表示 Canvas#rotate 旋转角度的 正弦和余弦值 , 顺时针旋转为正 ;

translateX 和 translateY 分别表示 X 轴 和 Y 轴平移的值 ;

scale 表示 Canvas 画布缩放值 ;

调用 Canvas#getMatrix 方法 , 可获取上述 $3\times 3$ 的 Matrix 矩阵 , 该方法原型如下 :

    /**
     * 返回一个新矩阵和画布当前变换矩阵的副本。
     *
     * @deprecated @link #isHardwareAccelerated() 硬件加速的
     * 画布在传递到视图或可绘制时可能有任何矩阵，
     * 因为它是在层次结构中创建此类画布的位置由实现定义的。
     * 在这种情况下，建议绘制内容而不考虑当前矩阵，或跟踪画布之外的相关变换状态。
     */
    @Deprecated
    public final @NonNull Matrix getMatrix() 
        Matrix m = new Matrix();
        //noinspection deprecation
        getMatrix(m);
        return m;
    

上述 Canvas#translate 平移 , Canvas#rotate 旋转 , Canvas#scale 缩放 , Canvas#skew 扭曲斜拉 等操作的 $3\times 3$ 的 Matrix 矩阵

会与

代表 Canvas 绘图坐标系的 $2\times 2$ 的 Matrix 矩阵

进行运算 , 最终得到一个 新的 Canvas 绘图坐标系 ;