Android从零开搞系列：自定义View（8）Canvas解析

最新推荐文章于 2025-03-11 09:35:50 发布

MDove

最新推荐文章于 2025-03-11 09:35:50 发布

阅读量531

点赞数

分类专栏： Android 从零开搞系列自定义View 文章标签： android canvas

本文链接：https://blog.youkuaiyun.com/wjzj000/article/details/54925149

版权

Android 同时被 3 个专栏收录

89 篇文章

订阅专栏

从零开搞系列

25 篇文章

订阅专栏

自定义View

19 篇文章

订阅专栏

本文深入探讨Android中Canvas的使用技巧，包括平移、旋转等操作的实现原理，并通过实例演示如何绘制复杂的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注意：http://blog.youkuaiyun.com/wjzj000/article/details/54925149

本菜开源的一个自己写的Demo，希望能给Androider们有所帮助，水平有限，见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect （拆解GitHub上的优秀框架于一体，全部拆离不含任何额外的库导入）
https://github.com/zhiaixinyang/MyFirstApp（Retrofit+RxJava+MVP）

写在开头

为啥重新再写基本的使用，原因主要有三点：
1，我的一个同学给我的一个反馈。让我发现有必要重新处理使用Canvas画图的这个过程。
2，最近啥也没搞，也算是加深加深印象。
3，还没想好…以后再说。

！！警告，请务必看到下边这一行！！

以下关于梳理及文字内容：是我用自己的理解来解释我遇到的现象，至于是不是最正确的我不敢保证。但是会尽最大可能性去解释各种各样的效果。
如介意此种情况，拖鞋手牌拿好，出门红浪漫有请！来宾一位！

关于Canvas：

这个词的翻译是：画布，帆布。

如果想看官方介绍，移步：https://developer.android.google.cn/guide/topics/graphics/2d-graphics.html
这里实在不想再写基本API的使用了。
各位看官可以参看官网：https://developer.android.google.cn/reference/android/graphics/Canvas.html
或者是我的；另一篇博客：http://blog.youkuaiyun.com/wjzj000/article/details/53589024

这里主要说一说个人理解看法：
让我们通过一个简单的写法来慢慢道来：

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawRect(new Rect(0,0,300,300),paint);
}

非常简单的一句话，在onDraw之中通过canvas的引用，用paint这个Paint，画一个以（0，0）和（300，300）为坐标的矩形。
官方建议：在onDraw之中使用canvas，而不是自己创建Canvas对象。

OK，咱们看上边那个代码。很容易联想到我们现实生活之中：使用笔在纸上画画。这种理解没毛病…但是根据我们如果去查看一下Canvas中的drawRect的源码我们会发现里边是native方法。也就是说Canvas很复杂涉及到了C/C++的内容。因此为什么我说这边博客的内容是自己根据具体的效果自己进行总结梳理。因为不好看源码实在不好用官方的注释来解释现象。

我们姑且先理解Canvas就是我们现实生活中的画纸。但是这个纸是有坐标系的！
初始情况（0，0）也就是我们屏幕的右上角，这个没啥好说的。这里必须要说明一个情况，根据我的测试：Canvas没有界限，至少屏幕不是它的边界。为什么这么说？
我们看如下的代码：

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.BLUE);
    canvas.translate(500,1000);
    canvas.drawRect(new Rect(0,0,300,300),paint);
}

如果各位把这个代码跑起来会发现，我们整个屏幕依旧是蓝色的，而我们的矩形跑到了（500，1000）的位置。

贴上效果：

这也就是证明了上边所说：Canvas不能以界限这一说来束缚Canvas。
以下是我通过给我画的图，接下来让我们结合这张图在和我们传统中画布的这个解释模型一起来梳理Canvas。

上图：

这里的Canvas用虚线来表示，代表它没有边间。而我们移动Canvas的使用，实际上就是以Canvas的（0，0）为基点，进行移动。

OK，篇幅展开到这，个人觉得已经可以很好的解释，Canvas的旋转和平移了。那么接下来让我们通过一段代码，结束这篇博客：

先上效果，非常的简单，如果豁然开朗，那么这篇博客也算美白写，否则的话：拖鞋手牌拿好，出门红浪漫有请！来宾一位！

canvas.translate(getWidth()/2,getHeight()/2);
for (int i=0;i<19;i++){
    canvas.drawLine(-100,0,-120,0,paint);
    canvas.rotate(10);
}

结合上边的那幅图，首先我们将我们的Canvas移动到屏幕的中心，那么此时Canvas的（0，0）也就是屏幕的中心，也就是圆心处。
紧接着我们通过一个循环（循环19次，用于画一个半圆的刻度盘）。
我们使用drawLine画线时，startX传入了-100，也就是X轴负半轴100的位置。stopX为-120，也就是说线段长20px。
画完线段后rotate，旋转画布。（正度数的旋转可以理解为，是以X轴的正半轴开始，顺时针转）旋转完画布之后我们的，我们此时的坐标系也就是说整体顺时针转了10度。所以我们依然使用原drawLine进行画线，而不需要管线的起始和终止坐标问题，因为它随着Canvas的旋转而旋转。

关于自定义View频繁旋转的效果，我写过一篇博客。也正是这篇博客，我的同学给了我反馈，并促使了这篇博客的出现。
http://blog.youkuaiyun.com/wjzj000/article/details/53589024