前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Android UI】Canvas 画布 ⑧ ( Canvas 绘图坐标系 2x2 矩阵 | Canvas 绘图坐标系 3x3 操作矩阵 )

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

作者头像
韩曙亮
发布2023-03-30 16:06:45
1.3K0
发布2023-03-30 16:06:45
举报
文章被收录于专栏:韩曙亮的移动开发专栏

文章目录

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

其中 图层栈 又称为 Layer 栈 ;

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

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

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


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

代码语言:javascript
复制
    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\times2

的 Matrix 矩阵 ;

2\times2

的 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 矩阵 , 该方法原型如下 :

代码语言:javascript
复制
    /**
     * 返回一个新矩阵和画布当前变换矩阵的副本。
     *
     * @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 绘图坐标系 ;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、Canvas 绘图坐标系 2x2 矩阵
  • 二、Canvas 绘图坐标系 3x3 操作矩阵
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档