Android图形系统简介

1. Android 形系 介图 统简
朱才

2. 算机 形学计 图
像图
像的承 ：图 载 Bitmap 、 FrameBuffer 都是点 。由每个像素排列 成。阵图 构
通常的 像格式图 ARGB8888 就表示每个通道 8bit ，每个像素占 32bit=4byte 。
如 0x11223344 表示 11 为 alpha ， 22 为 red ， 33 为 green ， 44 为 blue 。
色也是 么表示，可以 每个像素就是一个 色。颜 这 认为 颜
一个 ARGB8888 格式的 2x2 的 片内存 是 的纯红图 应该 这样 byte[] ： (16 制表示进 )
ff ff 00 00 ff ff 00 00 ff ff 00 00 ff ff 00 00
算机 形学的根本就是 建或修改 像内容。计 图 创 图

3. 算机 形学计 图
绘图 - 画点的 代伪 码
void 画点 (x ， y, 色颜 ) {
算点在计 buffer 中的索引 : y * 度宽 + x;
改变 buffer 中指定索引 的 指定 色 。处 值为 颜 值
}

4. 算机 形学计 图
绘图 - 画直 的 代线 伪 码
void 画线 ( 点 1 ，点 2) {
算斜率；计
画第一个点；
for 循环 () {
根据斜率，画下一个点，直到 束；结
}
}

5. 算机 形学计 图
绘图 - 画三角形的 代伪 码
void 画三角形 ( 点顶 1 ， 点顶 2 ， 点顶 3) {
制最上面的点；绘
算上面的点到下面 个点的斜率；计 两
for 循 （环 y ：从上往下循 ，直到 到其中一个点后 束）环 碰 结 {
根据 个斜率， 算出三角形在当前两 计 y 坐 条 上的标时两 边 x1 ， x2 坐 ；标
for 循 （环 xn ：从 x1 到 x2 ） {
制点（绘 xn ， y ）；
}
}
上面是 制的三角形上半部分， 里再用类似的方式 制下半部分， 程同上。绘 这 绘 过
}

6. 算机 形学计 图
绘图 - 画 片的 代图 伪 码
void 画 片图 ( 点顶 1 ， 点顶 2 ， 点顶 3 ， 理坐纹 标 1 ， 理坐纹 标 2 ， 理坐纹 标 3 ， 片图 ) {
根据 理坐 取 片上 像素来 制最上面的点；纹 标 图 对应 绘
算上面的点到下面 个点的斜率；计 两
for 循 （环 y ：从上往下循 ，直到 到其中一个点后 束）环 碰 结 {
根据点的 个斜率， 算出三角形在当前两 计 y 坐 条 上的标时两 边 x1 ， x2 坐 ；标
for 循 （环 xn ：从 x1 到 x2 ） {
根据当前点坐 ，插 得到当前点的 理坐 ；标 值 纹 标
根据 理坐 取 片上 像素来 制点纹 标 图 对应 绘 :xn ， y ；
}
}
上面是 制的三角形上半部分， 里再用类似的方式 制下半部分， 程同上。绘 这 绘 过
}

7. Android 形系图 统
Skia ：
C++ 写。编 CPU 行各执 种 draw 操作。 2D 。
支持 制各 矢量 形。绘 种 图
OpenGL ：
API 范，由各个硬件厂商提供 。硬件加速。规 实现 3D 。
OpenGL ES 可 是精 版。认为 简
OpenGL ES 只支持 制：点、 、三角形。多 形一般由多个三角形拼成。绘 线 边
OpenGL ES 2.0 之后支持 Shader ： GPU 里 行的代 。执 码
一次 制的 程大概是：绘 过
入 元及相 信息：包括 点坐 、 点 色或 点 理坐 等输 图 关 顶 标 顶 颜 顶 纹 标
点 ：模型 矩 映射每个坐 点，投影矩 将顶 变换 视图 阵 标顶 阵 3D 坐 映射标 为 2D 坐 。标
染：根据 制的类型（一般都是三角形）、 点数据，来 染其每个像素。渲 绘 顶 渲
Skia 和 OpenGL

8. Android 形系图 统
件 ：软 绘图 Skia 实现
硬件 ：绘图 hwui 库 => OpenGL 实现

9. Android 形系图 统
件软 绘图 ,app 端一次 流程绘图

10. Android 形系图 统
硬件绘图 ,app 端一次 流程绘图

11. Android 形系图 统
NONE ：默 。不是一个 独的 。 件 是硬件 跟着父认值 单 层 软 绘图还 绘图 View 走。
硬件层：一个独立的硬件 。里面的内容先会被 染到一个离屏 冲，再将 个 冲内容 制到层 渲 缓 这 缓 绘
主 冲区缓 (FrameBuffer) 。
件软 层：会分配一个 Bitmap ，先将内容以 件 方式 制到软 绘图 绘 Bitmap 中，再将 Bitmap 制绘
到主 冲区。缓
的主要好 ：层 处
内容未改 不需要更新。变则
件 里用 件 模式。软 层 软 绘图
setLayerType 方法有个参数 Paint ，用来最 将离屏 冲 制到主 冲上。终 缓 绘 缓
View.setLayerType ：硬件 和 件 以及层 软 层 NONE

12. Android 形系图 统
件软 绘图：
draw 操作立即 行。执
硬件绘图：
draw 操作被 存到缓 DisplayList ， 取整个获 DisplayList 后一次性 draw 。
因此 片需要 存。图 缓
片需要加 到 理。图 载 纹
更全面的介 ：绍 http://developer.android.com/guide/topics/graphics/hardware-accel.html
模式的差两种绘图 异

13. Android 形图 API
Paint 开关 AntiAlias ：文字、矢量 形图 ( 、矩形等线 ) 使用。对 Bitmap 内部无
效。

14. Android 形图 API
Paint 开关 FilterBitmap ： 片平滑。 片有拉伸旋 使用。图 图 转时 ( 双 性线 过滤 )

15. Android 形图 API
如果要 制一个旋 的 片，怎 效果最好？绘 转 图 样
用 drawBitmap ，开启 FilterBitmap ， 会有 。则边缘 锯齿 (AntiAlias 对 drawBitmap 无效。 )
因此若要 也抗 ， 要用：边缘 锯齿 则 BitmapShader(TileMode.CLAMP) ， drawRect 方式，开启
FilterBitmap 和 AntiAlias 。

16. Android 形图 API
Paint 开关 Dither ：高精度格式 像 制到低精度图 绘 Canvas 上 生效。如：时 RGB565 的 Canvas 上 制绘
ARGB8888 的 片。图

17. Android 形图 API
Canvas ： holds the "draw" calls.
Matrix ： holds a 3x3 matrix for transforming coordinates.
Paint ： holds the style and color information about how to draw geometries, text and bitmaps.

18. Android 形图 API
Canvas.draw[point,line,rect,circle,oval,arc,path,text,bitmap]

19. Android 形图 API
Canvas.[translate 、 rotate 、 scale 、 skew] ( 都是 pre 的方式 )
Matrix.set/pre/post[translate 、 rotate 、 scale 、 skew]
set ：直接覆盖之前的 。值
pre ：前乘。后面的代 先生效。码
post ：后乘。前面的代 先生效。码
Matrix 通过 mapPoints 点 行映射来 生效果。对关键 进 产
Canvas.java: ( 可根据此函数的功能来理解前乘的效果 )
public void scale(float scaleX, float scaleY, float pivotX, float pivotY) {
translate(pivotX, pivotY);
scale(scaleX, scaleY);
translate(-pivotX, -pivotY);
}

20. Android 形图 API
Matrix.setPolyToPoly ：逆向，根据原始点与映射点 算得到计 Matrix 。
Camera ： 3D 投影。

21. Android 形图 API
Canvas
clipRect ：裁剪区域。 draw 操作不会影响到超出的区域。

22. Android 形图 API
Canvas:
save ， saveLayer 。对应 restore 。
save ：可保存 Matrix 和 clip 区域。
saveLayer ：除了上面的， 会将指定区域分配还
成离屏 冲。（尽可能加缓
CLIP_TO_LAYER_SAVE_FLAG 志。）标

23. GUI 原理
GUI 本 ：用 入和 像 出。质 户输 图 输
者都建立在位置区域的基 上。两 础
View 里 的本地坐 怎么来的：绘图时 标 Canvas.translate 。
什么 制无法超出为 绘 View 的内容： View.setClipChildren => Canvas.clipRect 。

24. 看谢谢观
Q&A
zhucai@gmail.com