Android 自定义 View之画图的五个元素组件

时间：2024-05-31 16:35:43

目录（注：特别感谢原作者：来自简书的fuck两点水）

Android 自定义 View之画图的五个元素组件从0到1Android自定义View（三） 画图的五个元素组件.png

一、画图五个元素组件简介

Android Framework 提供了一些 2D 画图的 API，android.graphics 包就是其中之一。

通常我们在自定义 View 中需要画一些东西，那么基本就是需要 5 个元素组件协同来完成的。这 5 个组件分别是：

  • 颜色：Color

  • 位图：Bitmap 来保持（hold）那些像素，通过 Matrix 来使图像变换，如平移、旋转、缩放、扭曲等

  • 画布：Canvas 来响应画画（draw）的调用（并将其写入 bitmap）

  • 画笔：Paint 描述画画的颜色和样式等

  • 路径：Path 根据路径绘制文本和剪裁画布

其实这也很好理解，编程其实就是根据生活哲学创造的。比如 JAVA 的编程思想就是：万事万物皆对象。在现实生活中，我们需要画一些东西，也是需要画纸，画笔，颜料等等，因此自定义 View 中，我们需要画一些东西，也是离不开画布（Canvas），画笔（paint），其中我们可以调整画布的颜色和画笔的颜色。

下面我们一个一个类的看下相关的知识点，虽然会有点闷，可是感觉这又是必需的，过完这些知识点后，就开始一些实战的运用了。

二、颜色：Color 类

Color 我们应该是接触的比较多的，因此只是简单的介绍一下使用方式。Android 系统中颜色的常用表示方法有以下 3 种：

1、int color = Color.BLUE;

2、int color = Color.argb(150,200,0,100);

3、在xml文件中定义颜色；

三、位图：Bitmap 类

1、Bitmap 类在自定义 View 中的简介

Bitmap (android.graphics.Bitmap)，是 Android 系统中的图像处理的最重要类之一。用它可以获取图像文件信息，进行图像剪切、旋转、缩放等操作，并可以指定格式保存图像文件。

当然，在自定义 View 中使用最多的操作大概就是一些剪切，旋转等动画功能了。因为 Bitmap 涉及的方面挺广的，因为这是自定义 View 系列，主要是介绍如何通过 Matrix 在 Android 中的使图像（ Bitmap ）变换，如平移、旋转、缩放、扭曲等。

2、Matrix 简介

Matrix 内部通过维护一个 float[9] 的数组来构成 3x3 矩阵的形式，而实际上所有的变换方法说到底就是通过更改数组中某个或某几个位置的数值。Matrix 提供了 setValues() 和 getValues() 方法来操作数组。

Android 自定义 View之画图的五个元素组件Matrix 矩阵格式.png

实际上我们平常利用 Matrix 来进行 Translate（平移）、Scale（缩放）、Rotate（旋转）的操作，就是在操作着这个矩阵中元素的数值来达到我们想要的效果。但是现在问题来了，上面提到的平移、缩放、旋转操作中，旋转和缩放可以用乘法表示，而平移就只能用加法表示，而且 Matrix 是一个 3 X 3 的矩阵，实际上表示这些操作 2 X 2 的矩阵足矣！

Android 自定义 View之画图的五个元素组件Matrix的平移、缩放、旋转的矩阵.png

如上，可以依次看到平移、缩放、旋转的矩阵，其中

  • （x'，y'）表示执行操作后的点的坐标

  • （x，y）表示执行操作前的点的坐标

  • tx、ty 分别表示 x 轴、y 轴上平移的距离

  • Sx、Sy 分别表示x轴、y轴上的缩放比例

  • θ 则表示旋转角度

其实在计算机图形应用涉及到几何变换，主要包括平移、旋转、缩放。以矩阵表达式来计算这些变换时，平移是矩阵相加，旋转和缩放则是矩阵相乘。不过，通过齐次坐标（齐次坐标有着广泛的应用，包括电脑图形及 3D 电脑视觉。使用齐次坐标可让电脑进行仿射变换，并通常，其投影变换能简单地使用矩阵来表示。），将平移的加法合并用乘法表示。

3、Matrix 9 个元素的作用

上面都提到了 Matrix 是一个 3 X 3 的矩阵，也就是说一个 Matrix 共有 9 个元素，那么它每个元素的值发生改变会起到什么作用呢？

Matrix 基本变换有 4 种: 平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew)。这 4 种变换都是由矩阵中的 9 个元素参数控制的

Android 自定义 View之画图的五个元素组件Matrix 9 个元素的作用.png

上面提到了平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew) 都是由这 9 个元素控制的，当然，Android 给我们提供了一系列的方法函数，且这些变换操作，每一种操作在 Matrix 均有三类,前乘(pre)，后乘(post)和设置(set)

常用API包括下面的组合形式

  set pre post
translate setTranslate preTranslate postTranslate
scale setScale preScale postScale
rotate setRotate preRotate postRotate

我们用translate来讲

setTranslate() 指定了移动的位置，不需要通过左乘右乘

postTranslate() 在方法内部进行的是 M' = T(dx, dy) * M，t 左乘m

preTranslate() 在方法内部进行的是 M' = M * T(dx, dy)，m左乘t

post,pre的乘法计算顺序是相反的，矩阵乘法不满足交换律，所以计算结果几乎是不同的。

可能不太好理解，不过先要知道有这回事，之后通过实践就能很好的理解了。当然，Matrix 提供的 API 方法还有很多，罗列出来给各位看，效果也不是很好，主要是 API 方法是会变的，因此我们最重要的技能还是学会在编程中看 API 方法，查看源码或者源码中的解释介绍来看和了解相关方法的作用。

四、画布： Canvas 类

1、Canvas 类简介

Canvas，画布，能够在上面绘制各种东西，是安卓平台 2D 图形绘制的基础。因为 Canvas 类是构成上层的基础，所以它的可操作性强，里面提供的方法也是相对基础的，因此想弄成复杂一点的图像是有一定的难度的。

2、Canvas 类提供的 API

其实我的看法跟上面一样，不全列出来 Canvas 类提供的 API 方法，因为太多了，列出来，相信各位也不会细看，太多的话，更不容易让各位了解记忆。所以大概总结一下， 用到可以打关键字，就能在 AS 或者 Eclpise 中查到相关的方法了。

Canvas 提供的绘制图形的方法，基本都是以 draw 开头的。好，我们只要知道这个，我们只要打出关键字就可以知道相关的方法了，例如：

Android 自定义 View之画图的五个元素组件Canvas draw方法.png

从上面方法的名字看来我们可以知道 Canvas 可以绘制的对象有：弧线(arcs)、填充颜色(argb 和color)、 Bitmap、圆(circle 和 oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、顶点(Vertices)、路径(path)。

我个人是比较不提倡死记硬背有哪些 API 方法的，通过思考，猜想 Google 的工程师可能会提供什么方法出来，比如，上面的，Canvas 类提供了可以绘制的对象，可是只有这些，还是不够的，为什么？因为我们看到的自定义 View 都是附带一些动画的，比如选择等等，所以我们可以知道，Android 会提供了一些对 Canvas 位置转换的方法：rorate、scale、translate、skew(扭曲)等。而且它允许你通过获得它的转换矩阵对象，也就是上面所介绍的。这些操作就像是虽然你的笔还是原来的地方画，但是画纸旋转或者移动了，所以你画的东西的方位就产生变化。为了方便一些转换操作，Canvas 还提供了保存和回滚属性的方法( save 和 restore )，比如你可以先保存目前画纸的位置(save)，然后旋转 90 度，向下移动 100 像素后画一些图形，画完后调用 restore 方法返回到刚才保存的位置。

五、画笔： Paint 类

1、Paint 类简介

Paint 类包含有用来画几何图形、文本、位图的类型和颜色等信息，如果把 Canvas 类看作是画板，那我们可以把 Paint类 看做是画笔，可以根据需要画出不同颜色和样式的图形、文本等内容。其实基本 Paint 类和 Canvas 类都是结合使用的。

2、Paint 类提供的 API

Paint 类提供了很多方法来设置和获取 Paint 对象的属性，像上面提到的观点一样，猜下会提供什么 API 方法，竟然是画笔，我们现实中有不同的颜色的画笔，所以 API 提供了的很多方法来设置和获取Paint 对象的属性，像刚提到的颜色值（setColor），Alpha 值（setAlpha），字体尺寸（setTextSize）和画笔风格，空心或者实心（setStyle）等等。当然有 set 方法肯定也会有对应的 get 方法。

六、路径：Path 类

1、Path 类简介

Path 类的官方定义：路径，即无数个点连起来的线。其实也就是说 Path 类封装了由直线和曲线构成的几何路径。

2、Path 类作用

上面提到的绘制都是简单图形(如 矩形 圆 圆弧等)，而对于那些复杂一点的图形则没法去绘制(如绘制一个心形 正多边形 五角星等)，而使用 Path 不仅能够绘制简单图形，也可以绘制这些比较复杂的图形。另外，根据路径绘制文本和剪裁画布都会用到 Path。

3、Path 类提供的 API

Path 类相对来说，提供的方法不是三言两语就能说明白的，需要通过实践来体会，这里只是简单的提下，还是要通过往后实践来加深理解的。

Path 类，上面提到可以绘制复杂的图形，因此会有基本绘图方法。比如绘制圆形（addCircle），绘制直线（lineTo）和绘制圆角矩形（addRoundRect）。这时我们就会想到，不是绘制复杂的图形吗，这些都是基本的图形啊。那么怎么绘制复杂的图形呢，当然复杂的图形都是有基本的图形演变来的，那么 Path 提供了什么特别的 API 吗？所以 Path 提供了 lineTo,moveTo,quadTo,cubicTo 以及与之对应的 rLineTo ，rMoveTo ，rQuadTo，rCubicTo的方法。比如 lineTo(float x, float y)，绘制一条 x 到 y 的直线，因为两点决定一条直线，所以提供两个点就行了。而 rLineTo 呢？rLineTo 方法是基于当前绘制开始点的offest。比如当前 paint 位于 (100,100) 处， rLineTo(100,100) 方法绘制出来的直线是从 (100,100) 到 (200,200) 的。也就是 rXXX 方法方便用来基于之前的绘制作连续绘制。

当然 Path 类还有一些其他的方法，比如移动画笔到 (x,y) 处：moveTo(float x,float y)，设置当前 path 的终点： setLastPoint(float x,float y) 等等一些列的方法。

相关文章