文章目录

  • 一、Canvas 绘图坐标系平移实例
  • 二、代码示例

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

其中 图层栈 又称为 Layer 栈 ;

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

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

一、Canvas 绘图坐标系平移实例


在 Canvas#onDraw 中进行绘制 , Canvas 的绘图坐标系 初始状态 与 Canvas 自身坐标系 是相同的 , 如果直接进行绘制 , 其绘制坐标 就是在 组件范围内进行绘制 ;

        // 绘图用的画笔工具Paint paint = new Paint();// 要绘制的矩形 , 下面的坐标是 Canvas 绘制坐标系中的坐标RectF r = new RectF(0, 0, 666, 666);// 设置画笔颜色蓝色paint.setColor(Color.BLUE);// 绘制矩形canvas.drawRect(r, paint);

绘制完毕后 , 调用 Canvas#save 方法 , 保存当前的 绘图坐标系数据 到状态栈中 ,

        // 将当前坐标保存到 状态栈 中canvas.save();

调用 Canvas#translate 方法 , 将 Canvas 画布进行平移操作 , Canvas 绘图坐标系 由 原来的位置 分别向 X 轴和 Y 轴平移 111111111 像素 , 平移后 Canvas 的绘图坐标系 变为新的位置 ;

        // Canvas 绘图坐标分别在 X, Y 轴正向平移canvas.translate(111, 111);

Canvas 自身坐标系 范围就是 黄色范围 , Canvas 绘图坐标系 初始与黄色范围重合 , 因此初始位置绘图的蓝色矩形 , 其左上角与 Canvas 自身坐标系 原点重合 ;

Canvas 平移后 , 画布向右下角移动 , Canvas 的绘图坐标系就是下图中的红色范围 ;

下面的 组件 背景是黄色的 , 黄色范围就是组件的轮廓 , 在初始位置绘制的蓝色矩形如下 , 其左上角 与 Canvas 自身坐标系 , Canvas 绘图坐标系 原点 重合 ;

Canvas 平移后 , 绘制的红色矩形 , 其 绘图坐标系的原点 就是 红色矩形的 左上角位置 ;

如果要终止在该 Canvas 自身坐标系中绘图 , 则调用 Canvas#restore 方法 , 将 Canvas 绘图坐标系恢复到初始位置 , 也就是恢复到下图的样式 ; 蓝色是 Canvas 绘图坐标系 , 黄色是 Canvas 自身坐标系 ;

        // 与上面的 save 方法对应canvas.restore();

二、代码示例


完整代码如下 :

package kim.hsl.android_ui;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;import androidx.annotation.Nullable;public class CanvasTranslate extends View {public CanvasTranslate(Context context) {this(context, null);}public CanvasTranslate(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public CanvasTranslate(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 绘图用的画笔工具Paint paint = new Paint();// 要绘制的矩形 , 下面的坐标是 Canvas 绘制坐标系中的坐标RectF r = new RectF(0, 0, 666, 666);// 设置画笔颜色蓝色paint.setColor(Color.BLUE);// 绘制矩形canvas.drawRect(r, paint);// 将当前坐标保存到 状态栈 中canvas.save();// Canvas 绘图坐标分别在 X, Y 轴正向平移canvas.translate(111, 111);// 设置当前画笔颜色为红色paint.setColor(Color.RED);// 在 Canvas 画布平移的基础上再次进行绘制canvas.drawRect(r, paint);// 与上面的 save 方法对应canvas.restore();}
}

展示效果 : 黄色部分是 组件范围 , 蓝色矩形是 第一次绘制的 , 红色矩形是 Canvas 画布平移后 第二次绘制的 ;

【Android UI】Canvas 画布 ⑨ ( Canvas 绘图坐标系平移实例 )相关推荐

  1. 【Android UI】Canvas 画布 ① ( Canvas 状态栈 | Canvas 状态栈入栈与出栈 | 获取 Canvas 状态栈容量 | Canvas 状态栈原点数据 )

    文章目录 一.Canvas 状态栈入栈与出栈 二.获取 Canvas 状态栈容量 三.Canvas 状态栈原点数据 Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ...

  2. 【Android UI】Canvas 画布 ③ ( Canvas 图层栈 | Canvas#saveLayer() 新建图层 | Canvas 状态栈保存信息标志位 )

    文章目录 一.Canvas#saveLayer() 新建图层 二.Canvas 状态栈保存信息标志位 Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ; 其中 图层 ...

  3. Android 画布Canvas之控件连线操作

    一.需求: 1.在画布中的控件A长按能进行控件的连接,只有在控件B范围内抬起控件之间的连线才能连接成功: 2.当控件连线成功后,拖动控件AB之间的连线随着控件的拖动随之变化: 3.控件连线在屏幕上随着 ...

  4. Unity 3D Canvas画布

    Unity 3D Canvas画布 Canvas 是画布,是摆放所有 UI 元素的区域,在场景中创建的所有控件都会自动变为 Canvas 游戏对象的子对象,若场景中没有画布,在创建控件时会自动创建画布 ...

  5. Android UI设计经验分享,掌握设计技巧,让你的应用独树一帜

    Android UI渲染是指Android应用程序中的用户界面如何被绘制.Android UI渲染很重要,因为渲染过程直接影响应用程序的性能和用户体验. 当用户在Android应用程序中进行交互时,应 ...

  6. s时钟画布 android,Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟

    概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...

  7. Android复习14【高级编程:推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解(平移、旋转、缩放、倾斜)、矩阵详解】

    目   录 推荐网址 抠图片上的某一角下来 8.2.2 Bitmap引起的OOM问题 8.3.1 三个绘图工具类详解 画线条 8.3.16 Canvas API详解(Part 1) 1.transla ...

  8. Android 自定义控件-Canvas和Paint绘图详解-手把手带你绘制一个时钟.

    Android - Paint基础 在自定义控件时,经常需要使用canvas.paint等,在canvas类中,绘画基本都是靠drawXXX()方法来完成的,在这些方法中,很多时候都需要用到paint ...

  9. Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟

    概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...

最新文章

  1. 前端如何获取后台通过map封装的值_如何舒服的写api接口?
  2. P1583 魔法照片
  3. Beta冲刺提交-星期四
  4. 华为又一战略级生态启程:华为IdeaHub 使能千行百业
  5. 手把手:R语言文本挖掘和词云可视化实践
  6. mysql原生分页语句_mysql原生分页
  7. c语言ATM机文件储存账号密码,C语言实现_ATM自动取款机系统
  8. EfficientNet 解析:卷积神经网络模型尺度变换的反思
  9. java中的泛型(E)
  10. 写代码抽取代码的技巧
  11. 御剑情缘服务器维护吗,御剑情缘更新后登不上怎么回事 1月11日更新后进不去解决方法...
  12. IR2104与IR2103区别
  13. python实现多表合并_python实现excel多表合并的方法
  14. windows连接局域网打印机出现0x0000007c错误处理方法
  15. google浏览器更新后,出现并行配置不正确问题
  16. Unity制作AR图片和视频展示
  17. 单元测试怎么就成了银弹?
  18. 在Ubuntu 16.04中安装Google拼音
  19. 详解border-radius属性
  20. Python项目实战:数据可视化与股票数据分析-关东升-专题视频课程

热门文章

  1. 微商无钢圈内衣怎么做引流?微商内衣如何寻找客源?
  2. 有些人的成功,并不是偶然(一个真实的故事)
  3. WebSocket:扫码登录
  4. SILK : SILK_RTP_PayloadFormat 中文翻译(一)
  5. nodejs获取get/post请求参数
  6. 线性代数:仿射变换图形矫正
  7. 利用DoraOS将旧PC改造成瘦客户机
  8. 白板的基本操作(画笔,橡皮檫、滚屏,颜色)
  9. QT从入门到入土(九)——TCP/IP网络通信(以及文件传输)
  10. 全场景智能收银机POS主板RK3568方案