AI 助理
备案控制台
开发者社区 大数据与机器学习 人工智能平台PAI 文章 正文

Android自定义View工具：Paint&Canvas(二)

2023-04-21 451
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本篇接着来看Canvas

接上篇，Android自定义View工具：Paint&Canvas(一)，上篇主要介绍的是Paint，本篇接着来看Canvas。

Canvas常用方法一览：

Canvas常用方法 备注
绘制颜色
drawARGB 通过设置ARGB值绘制颜色
drawRGB 通过设置RGB值绘制颜色
drawColor 绘制颜色
绘制图形
drawPoint，drawPoints 绘制点，点集合
drawLine，drawLines 绘制线，线集合
drawRect 绘制矩形
drawCircle 绘制圆
drawOval 绘制椭圆
drawArc 绘制弧
画布操作
translate、rotate、scale、save、restore 依次为位移、旋转、缩放、保存画布和恢复画布
drawPath 按路径绘制

  • Canvas绘制颜色：

canvas.drawARGB(int a, int r, int g, int b)
canvas.drawRGB(int r, int g, int b)
canvas.drawColor(int color) 
canvas.drawColor(int color, PorterDuff.Mode mode)

颜色的四种模式：

颜色模式 备注
ARGB8888 四通道高精度(32位)
ARGB4444 四通道低精度(16位)
RGB565 屏幕默认模式(16位)
Alpha8 仅有透明通道(8位)

ARGB:

类型 备注
A(Alpha) 透明度，取值范围 [0,255]，0代表完全透明，255代表完全不透明
R(Red) 红色，取值范围 [0,255]，0代表无色，255代表红色
G(Green) 绿色，取值范围 [0,255]，0代表无色，255代表绿色
B(Blue) 蓝色，取值范围 [0,255]，0代表无色，255代表蓝色

其中ARGB的取值范围均为0~255(即16进制的0x00~0xff)
A 从0x00到0xff表示从透明到不透明。
RGB 从0x00到0xff表示颜色从浅到深。
当RGB全取最小值(0或0x000000)时颜色为黑色，全取最大值(255或0xffffff)时颜色为白色
示例代码：

canvas.drawARGB(255, 0, 0, 0);
canvas.drawARGB(255, 255, 0, 0);
canvas.drawARGB(255, 0, 255, 0);
canvas.drawARGB(255, 0, 0, 255);

效果图分别为：

ARGB.png

  • Canvas绘制形状：

canvas.drawPoint(float x, float y, Paint paint) //绘制点
canvas.drawPoints( float[] pts, Paint paint) //绘制多个点

canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint) //绘制线
canvas.drawLines(float[] pts, Paint paint)//绘制多条线

canvas.drawRect(float left, float top, float right, float bottom, Paint paint) //绘制矩形
canvas.drawRect(RectF rect, Paint paint) //绘制矩形

canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint) //绘制圆角矩形
canvas.drawRoundRect(RectF rect, float rx, float ry, Paint paint) //绘制圆角矩形

canvas.drawCircle(float cx, float cy, float radius,Paint paint) 绘制圆

canvas.drawOval(float left, float top, float right, float bottom,Paint paint) //绘制椭圆
canvas.drawOval(RectF oval,Paint paint) //绘制椭圆

canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter,Paint paint) //绘制圆弧
canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint) ////绘制圆弧

1. 画点：

Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(15f);
canvas.drawPoint(400, 400, mPaint);
float[] pts = {500, 500, 500, 600};
canvas.drawPoints(pts, mPaint);

drawPoint前两个参数为点的坐标（x,y），而drawPoints方法第一个参数是float[]数组，每两个代表一个坐标，如上面{500, 500, 500, 600}代表两个坐标点(500,500)和(500,600)，效果图：
point.png
2. 画线：

Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(15f);
canvas.drawLine(200, 500, 800, 500, mPaint);
float[] pts = {200, 200, 500, 500,
               800, 200, 500, 500};
canvas.drawLines(pts, mPaint);

drawLine前四个参数代表起始坐标（x1,y1）和终点坐标（x2,y2）,而drawLines第一个参数是float[]数组，每四个代表一组起始坐标和终点坐标的组合，如上图{200, 200, 500, 500,800, 200, 500, 500}代表两组坐标点：起始坐标（200,200）终点坐标（500, 500），以及起始坐标（800, 200）和终点坐标（500, 500），效果图：

line.png

3. 画矩形：

Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10f);
//1.直接通过坐标画矩形
canvas.drawRect(200, 200, 1000, 600, mPaint);
//2.通过Rect 画矩形
Rect mRect = new Rect(200, 650, 1000, 1050);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawRect(mRect, mPaint);
//3.通过RectF 画矩形
RectF mRectF = new RectF(200, 1100, 1000, 1500);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10f);
canvas.drawRect(mRectF, mPaint);

通过获得四个点的值，即左上角（x1,y1）和右下角（x2,y2）的坐标来确定矩形，效果图：

rectangle.png
4. 画圆：

drawCircle(float cx, float cy, float radius, Paint paint)

（cx,cy）是圆点坐标，radius是圆半径，示例：

Paint mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10F);
mPaint.setColor(Color.RED);
canvas.drawCircle(600, 600, 200, mPaint);

效果图：

circle.png
5. 画椭圆：

drawOval( RectF oval,Paint paint)
drawOval(float left, float top, float right, float bottom, Paint paint)

第一个方法看源码还是调用的第二个方法，示例：

Paint mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10f);
//第一种，通过left top right bottom来确定矩形，然后画矩形的内切椭圆
canvas.drawOval(300, 100, 900, 500, mPaint);
RectF mRectF = new RectF(100, 600, 1000, 900);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//第二种，通过RectF 画椭圆，和第一种原理是一样的
canvas.drawOval(mRectF, mPaint);

效果图：
oval.png
6. 画圆角矩形：

//第一个方法必须SDK>=21以上
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
drawRoundRect(RectF rect, float rx, float ry, Paint paint)

示例：

float rRadius=20f;
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10f);
//第一种 必须SDK>=21以上使用
canvas.drawRoundRect(200, 100, 1000, 500, rRadius, rRadius, mPaint);
//第二种通过RectF 来画圆角矩形
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
RectF mRect = new RectF(200, 600, 1000, 1000);
canvas.drawRoundRect(mRect, rRadius, rRadius, mPaint);

RectF构造函数中的四个参数分别为上，左，右，下坐标，即左上角和右下角坐标，rx,ry表示的圆弧半径（椭圆圆弧），效果图：

roundrectangle.png
7. 画弧：

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

第一个方法默认也会去调用第二个方法，看第二个方法：

drawArc 备注
left 左上角坐标的X轴坐标
top 左上角坐标的Y轴坐标
right 右下角坐标X轴坐标
bottom 右下角坐标Y轴坐标
startAngle 起始角度
sweepAngle 扫过的角度
useCenter 是否使用中心
paint 画笔

示例：

Paint mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10f);
//通过下面前两个圆弧对比很明显,useCenter为true，最后图形是一个扇形，
//useCenter为false，则最后图形是起始点和结束点之间的连线和圆弧围成的面积。
canvas.drawArc(100, 100, 500, 500, 0, 90, true, mPaint);
canvas.drawArc(100, 500, 500, 900, 0, 90, false, mPaint);
//通过RectF 设置的区域范围画弧
RectF mRectF = new RectF(100, 900, 500, 1300);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawArc(mRectF, 0, 90, true, mPaint);

效果图：
arc.png

  • Canvas画布操作：

canvas.translate(float dx, float dy) //平移
canvas.rotate(float degrees) //旋转
canvas.rotate(float degrees, float px, float py) //改变旋转中心并旋转
canvas.scale(float sx, float sy) //缩放
canvas.scale(float sx, float sy, float px, float py) //改变缩放中心并缩放
canvas.save(); //保存画布
canvas.restore(); //恢复画布

Canvas画布操作可以让我们用更容易的方式来绘制图形，Canvas画布操作只会对后面的绘制起作用，对前面已经绘制的不起作用。
1. translate
translate是对坐标系的平移，且是可以多次叠加的，默认是在屏幕的左上角(0,0)，示例：

Paint mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
//将坐标系移到Canvas宽度的一半，高度400的位置
canvas.translate(getMeasuredWidth() / 2, 400);
//绘制一个红色圆
mPaint.setColor(Color.RED);
canvas.drawCircle(0, 0, 100, mPaint);
//坐标系原点在前面位置的基础上再往下移动200像素
canvas.translate(0, 200);
//绘制一个黄色圆
mPaint.setColor(Color.YELLOW);
canvas.drawCircle(0, 0, 100, mPaint);
//坐标系原点在前面位置的基础上再往下移动200像素
canvas.translate(0, 200);
//绘制一个绿色圆
mPaint.setColor(Color.GREEN);
canvas.drawCircle(0, 0, 100, mPaint);

效果图：

translate.png

2. rotate
rotate是对坐标系的旋转，rotate有两个方法：

canvas.rotate(float degrees) 
canvas.rotate(float degrees, float px, float py)

第二个方法中的（px,py）可以移动旋转中心然后旋转，示例：

Paint mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
//将坐标系移动到屏幕中心
canvas.translate(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
RectF rectF = new RectF(-300, -300, 0, 0);
//绘制一个红色矩形
mPaint.setColor(Color.RED);
canvas.drawRect(rectF, mPaint);
//将坐标系旋转180度，不会影响前面已经绘制的图形
canvas.rotate(180);
mPaint.setStyle(Paint.Style.FILL);
//绘制一个绿色矩形
mPaint.setColor(Color.GREEN);
canvas.drawRect(rectF, mPaint);

效果图：
rotate.png
上面代码如果改变旋转中心再旋转：

//将坐标系中心左移(-150,0),并旋转180度
canvas.rotate(180,-150,0);

效果图：

rotateCenter.png

可以旋转中心向左移了150像素，而原来的旋转中心已经不再是（0,0）了，而成了（150,0），旋转中心变了，旋转后绘制的图形位置也就不一样了。

3. scale

canvas.scale(float sx, float sy)
canvas.scale(float sx, float sy, float px, float py)

scale是缩放，缩放中心默认是坐标原点，且多次缩放是可以叠乘的，和rotate一样有2个方法，其中多出来的两个参数类似rotate的旋转中心，px,py是控制缩放中心位置，sx,sy是X轴和Y轴的缩放倍数，示例：

Paint mPaint = new Paint();
//坐标原点移到屏幕中心
canvas.translate(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
RectF rectF = new RectF(-300, -300, 0, 0);
mPaint.setColor(Color.RED);
//左上角绘制红色圆
canvas.drawRect(rectF, mPaint);
//X轴 Y轴分别缩放到原来的1/2并以原点(0,0)位对称点进行翻转
canvas.scale(-0.5f, -0.5f);
//绘制绿色的圆
mPaint.setColor(Color.GREEN);
canvas.drawRect(rectF, mPaint);

效果图：
scale1.png
修改上面scale方法：

canvas.scale(-0.5f, -0.5f, 100, 0)

效果图：
scale2.png
缩放中心向右移动100像素，X轴 Y轴分别缩放到原来的1/2，并且以新的缩放中心为对称点进行翻转，在修改一下scale参数：

canvas.scale(0.5f, 0.5f);
canvas.scale(-0.5f, 0.5f);
canvas.scale(0.5f, -0.5f);

效果图分别为：
initpintu.jpg
总结一下sx sy：

sx sy取值范围 备注
（1，+∞） 根据缩放中心放大到原来的n倍
1 跟原来大小一样，没变化
（0,1） 根据缩放中心缩放
0 sx sy有一个取0图形就消失了
（-1，0） 根据缩放中心缩放并翻转
-1 翻转
（-∞，-1） 根据缩放中心放大并翻转

4. save、restore：

save：保存之前Canvas的状态，save之后，可以调用Canvas的平移、缩放、旋转、错切、裁剪等操作。
restore：恢复Canvas之前保存的状态，防止save后对Canvas执行的操作对后续的绘制有影响。
canvas的save 和 restore是成对使用(restore只能比save少，不能多)，示例：

Paint paint = new Paint();
//保存画布
canvas.save();
//坐标原点移到屏幕中心
canvas.translate(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
//以屏幕中心为坐标原点在（60,50）为圆心处绘制红色圆
paint.setColor(Color.RED);
canvas.drawCircle(60, 50, 100, paint);
//恢复画布
canvas.restore();
//恢复画布后，坐标原点（0,0）默认在屏幕左上角，
//即以屏幕左上角为坐标原点在（60,50）为圆心处绘制黑色圆
paint.setColor(Color.BLACK);
canvas.drawCircle(60, 50, 50, paint);

效果图：
保存恢复画布.png

上面代码中如果去掉save和restore过程，即：

Paint paint = new Paint();
//canvas.save();
//坐标原点移到屏幕中心
canvas.translate(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
//以屏幕中心为坐标原点在（60,50）为圆心处绘制红色圆
paint.setColor(Color.RED);
canvas.drawCircle(60, 50, 100, paint);
//canvas.restore();
//没有了save和restore操作，坐标原点没有恢复到屏幕左上角，还是在屏幕中心
//即以屏幕中心为坐标原点在（60,50）为圆心处绘制黑色圆
paint.setColor(Color.BLACK);canvas.drawCircle(60, 50, 50, paint);

效果图是：
nosave.png

为什么效果不一样呢？这是因为如果去掉save和restore过程，所有图像都是在坐标原点移动到屏幕中心后绘制的；如果有save和restore，那么在restore之后进行的图像绘制原点又回到了屏幕左上角，可见save和restore调用时机会影响到最后绘图结果，save和restore之间往往是进行一系列的Canvas操作。

  • drawPath
canvas.drawPath( Path path, Paint paint)

drawPath内容较多，见下篇：Android Canvas之Path操作

文章标签：
人工智能平台 PAI
Python
前端开发
Android开发
关键词：
Android工具
Android自定义View
Android自定义
Android View
Android Canvas
相关实践学习
使用PAI+LLaMA Factory微调Qwen2-VL模型，搭建文旅领域知识问答机器人
使用PAI和LLaMA Factory框架，基于全参方法微调 Qwen2-VL模型，使其能够进行文旅领域知识问答，同时通过人工测试验证了微调的效果。
机器学习概览及常见算法
机器学习(Machine Learning, ML)是人工智能的核心，专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能，它是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域。 本课程将带你入门机器学习，掌握机器学习的概念和常用的算法。
_小马快跑_
目录
相关文章
计蒙不吃鱼
|
8月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先，作者自定义了一个圆角图片控件`MellowImageView`，用于绘制圆角矩形图片。接着，通过将布局放入`HorizontalScrollView`中，实现了左右滑动功能，并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例，包括XML布局、动画文件和Java代码，最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
计蒙不吃鱼
381 65
Android自定义view之网易云推荐歌单界面
计蒙不吃鱼
|
8月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程，涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现（如通过三个构造函数解决焦点问题），接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例，如跑马灯、折线图、太极图等。此外，文章详细解析了View绘制流程（measure、layout、draw）和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题，并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
计蒙不吃鱼
722 84
34789737
|
6月前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载，管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具，专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理，基于Xposed框架开发，安全可靠且开源免费，兼容Android 6.0及以上版本。
34789737
619 4
游客jad7vdu7glhh6
|
7月前
|
Android开发
安卓硬改一键新机工具，一键修改手机型号，串号网卡Imei、sn码【仅供学习参考】
声明部分：仅供学习参考使用，基于Xposed框架实现的设备信息伪装模块的完整代码，包含多个功能模块：
游客jad7vdu7glhh6
1660 1
游客vx6uejvd6s6ck
|
7月前
|
编解码 自然语言处理 Java
安卓改机工具免root,一键过设备检测,串号SN码【jar即可实现】
本项目通过Hook系统API实现设备信息的拦截与修改，主要功能包括动态更改IMEI/SN等设备标识。核心技术基于Xposed框架（免Root可用VirtualXposed）
游客vx6uejvd6s6ck
1077 3
游客rci3gd3n2dlu2
|
6月前
|
监控 Android开发 数据安全/隐私保护
批量发送短信的平台，安卓群发短信工具插件脚本，批量群发短信软件【autojs版】
这个Auto.js脚本实现了完整的批量短信发送功能，包含联系人管理、短信内容编辑、发送状态监控等功能
游客rci3gd3n2dlu2
563 0
游客3g2isv2zt6tuw
|
6月前
|
API 开发工具 Android开发
qq虚拟视频插件下载安装手机版， 安卓虚拟视频插件，替换摄像头工具
Xposed入口模块：拦截目标应用的相机调用‌23 Camera1 API处理：通过PreviewCallback替换视频流‌1 Camera2 API适
游客3g2isv2zt6tuw
639 0
计蒙不吃鱼
|
8月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下，传统View可能引发卡顿的问题，进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法，包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
计蒙不吃鱼
229 3
游客jad7vdu7glhh6
|
7月前
|
存储 JSON API
安卓ck提取工具，可提取手机cookie插件，AUTOJS即可实现
怎么用autojs提取手机端的CK？其实autojs是支持提取ck的但是他提取的不是浏览器的CK，二十他自身浏览器环境的c
游客jad7vdu7glhh6
1171 0
游客jad7vdu7glhh6
|
7月前
|
Java Android开发
安卓手机硬改工具， 设备型号修改神器， 安卓硬改一键新机
通过Java创建可执行JAR来修改安卓设备信息。核心功能包括读取系统属性
游客jad7vdu7glhh6
820 0
大数据与机器学习

人工智能平台PAI

热门文章

最新文章

  • 1
    【玩转数据系列十】利用阿里云机器学习在深度学习框架下实现智能图片分类
  • 2
    【玩转数据系列十五】机器学习PAI为你自动写歌词，妈妈再也不用担心我的freestyle了（提供数据、代码）
  • 3
    【玩转数据系列六】文本分析算法实现新闻自动分类
  • 4
    【玩转数据系列十三】机器学习算法基于信用卡消费记录做信用评分
  • 5
    【玩转数据系列三】利用图算法实现金融行业风控
  • 6
    机器学习PAI全新功效——实时新闻热点Online Learning实践
  • 7
    【玩转数据系列五】农业贷款发放预测
  • 8
    【玩转数据系列四】听说啤酒和尿布很配？本期教你用协同过滤做推荐
  • 9
    【玩转数据系列七】有娃的注意了，机器学习教您如何提高孩子学习成绩
  • 10
    阿里大航杯AI电力大赛比赛分享及数加平台，机器学习pai使用经验
  • 1
    网页模板源码-网站源码建设方式
    127
  • 2
    2025数字员工技术选型白皮书：阿里云/亚马逊等5款产品云原生能力实测
    196
  • 3
    当下数字人定制平台哪家好？实测后我推荐它
    178
  • 4
    ECreator+QuickSSO 为企业打造高效统一的数字化基座
    94
  • 5
    低代码技术及 ECreator 低代码平台解析
    93
  • 6
    新手如何建站.新手建站的全流程
    244
  • 7
    Miniconda 安装与环境配置全流程图解（2025 最新版）
    569
  • 8
    最新PyCharm 安装详细图文教程：小白也能轻松搞定
    301
  • 9
    手机端网站建设：响应式设计主导下的工具选取与实施步骤
    153
  • 10
    网站搭建黑科技：AI 写前端页面 + CMS 管理系统搭建实操指南
    420

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    基于Python+Vue开发的口腔牙科预约管理系统