自定义控件其实很简单四

曾经终败给现在 2024-02-17 19:00 8阅读 0赞

前几天身子骨出了点小毛病不爽，再加上CSDN抽风也木有更新，现在补上之前漏掉的1/3

上一节结尾的时候我们说到，Paint类中我们还有一个方法没讲

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  setShader(Shader shader)

这个方法呢其实也没有什么特别的，那么为什么我们要把它单独分离出来讲那么异类呢？难道它贿赂了我吗？显然不是的，哥视金钱如粪土（我的要求很低，只需要一克反物质即可）！怎么可能做出如此下三滥的事情！之所以要把这货单独拿出来是为了引出Android在图形变换中非常重要的一个类！这个类是什么呢？我也先不说，咱还是先来看看Shader：

![Center][]

Shader类呢也是个灰常灰常简单的类，它有五个子类，像PathEffect一样每个子类都实现了一种Shader，Shader在三维软件中我们称之为着色器，其作用嘛就像它的名字一样是来给图像着色的或者更通俗的说法是上色！这么说该懂了吧！再不懂去厕所哭去！这五个Shader里最异类的是BitmapShader，因为只有它是允许我们载入一张图片来给图像着色，那我们还是先来看看这个怪胎吧

BitmapShader

只有一个含参的构造方法BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)而其他的四个兄弟姐妹呢都有两个！它只有一个蛋，又一魂谈！那好吧，我们来看看它是什么个效果，顺便呢也学习一下Shader的用法先，来看我们熟悉的代码：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

如果上面我们没有设置Shader：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

那么我们Draw出来的图像一定是一个位于屏幕正中黑色的正方形，但是我们设置了Shader后还是一样的吗？看看效果：  
![Center 1][]

我靠！这什么玩意！罪过罪过！真是看不懂！别急，Shader.TileMode里有三种模式：CLAMP、MIRROR和REPETA，我们看看其他两种模式是什么效果呢：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR));

![Center 2][]  
诶？这效果还能接受，我们还能看得出一点效果，说白了就是上下左右的镜像而已，那再看看REPETA：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));

![Center 3][]  
这个就更简单了，明显的一个重复效果，而REPEAT也就是重复的意思，同理MIRROR也就是镜像的意思，这个很好理解吧。那第一个CLAMP模式究竟特么的是什么东西呢？看效果根本看不出来，我们不妨换个思维，BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)的第一个参数是位图这个很显然，而后两个参数则分别表示XY方向上的着色模式，既然可以分开设置，那么我们是不是可以这样设置一个Shader呢？

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.MIRROR));

也就是说我们在X轴方向上采取CLAMP模式而Y轴方向上采取MIRROR模式，那么这样肯定是可行的撒：  
![Center 4][]

大家可以看到图像分为两部分左边呢Y轴镜像了，而右边像是被拉伸了一样怪怪的！其实CLAMP的意思就是边缘拉伸的意思，比如上图中左边Y轴镜像了，而右边会紧挨着左边将图像边缘上的第一个像素沿X轴复制！产生一种被拉伸的效果！就像扯蛋，不过这里扯的不是蛋而是图像边缘的第一个像素，就是这么简单。但是！作为一个严谨的男人必须要又一个严谨的态度！这时我就会想，如果两种模式互换会怎样呢？比如：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.CLAMP));

这样来看，应该是X轴会镜像而Y轴会拉伸对吧，看看效果：  
![Center 5][]

这…………好像跟我们想象中的不大一样唉……是我们做错了吗？不是的，结合上一个例子大家有没有注意BitmapShader是先应用了Y轴的模式而X轴是后应用的！所以着色是先在Y轴拉伸了然后再沿着X轴重复对吧（阴笑ing……）？！

要善于发现生活规律！我曾经说过：存在必定合理，那么这么一个玩意有什么用处呢？给大家看一个非常有趣的东西：

![20150113163411109][]

这玩意是不是感觉跟以前那种小霸王某个游戏的开场动画很类似？我们就是利用BitmapShader来实现的，而且实现方法也异常简单：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** BrickView **extends** View \{ 
2.  **private** Paint mFillPaint, mStrokePaint;// 填充和描边的画笔
3.  **private** BitmapShader mBitmapShader;// Bitmap着色器
4.  
5.  **private****float** posX, posY;// 触摸点的XY坐标
6.  
7.  **public** BrickView(Context context, AttributeSet attrs) \{ 
8.  **super**(context, attrs); 
9.  
10. // 初始化画笔
11.  initPaint(); 
12.  \} 
13. 
14. /\*\*
15.  \* 初始化画笔
16.  \*/
17. **private****void** initPaint() \{ 
18. /\*
19.  \* 实例化描边画笔并设置参数
20.  \*/
21.  mStrokePaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG); 
22.  mStrokePaint.setColor(0xFF000000); 
23.  mStrokePaint.setStyle(Paint.Style.STROKE); 
24.  mStrokePaint.setStrokeWidth(5); 
25. 
26. // 实例化填充画笔
27.  mFillPaint = **new** Paint(); 
28. 
29. /\*
30.  \* 生成BitmapShader
31.  \*/
32.  Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.brick); 
33.  mBitmapShader = **new** BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); 
34.  mFillPaint.setShader(mBitmapShader); 
35.  \} 
36. 
37. @Override
38. **public****boolean** onTouchEvent(MotionEvent event) \{ 
39. /\*
40.  \* 手指移动时获取触摸点坐标并刷新视图
41.  \*/
42. **if** (event.getAction() == MotionEvent.ACTION\_MOVE) \{ 
43.  posX = event.getX(); 
44.  posY = event.getY(); 
45. 
46.  invalidate(); 
47.  \} 
48. **return****true**; 
49.  \} 
50. 
51. @Override
52. **protected****void** onDraw(Canvas canvas) \{ 
53. // 设置画笔背景色
54.  canvas.drawColor(Color.DKGRAY); 
55. 
56. /\*
57.  \* 绘制圆和描边
58.  \*/
59.  canvas.drawCircle(posX, posY, 300, mFillPaint); 
60.  canvas.drawCircle(posX, posY, 300, mStrokePaint); 
61.  \} 
62. \}

我只是单纯地加载了一张板砖的贴图然后呢在BitmapShader中XY轴重复就这么简单 = = ，是不是感脚被耍了一样好无聊~~~~是你不动脑而已……囧！来看看另一个Shader叫做  
LinearGradient

线性渐变，顾名思义这锤子玩意就是来画渐变的，实际上Shader的五个子类中除了上面我们说的那个怪胎，还有个变形金刚ComposeShader外其余三个都是渐变只是效果不同而已，而这个LinearGradient线性渐变一说大家估计都懂，先来看张效果图：

![Center 6][]

是不是秒懂了！恩，说明你头脑简单，这个实现也很简单，具体代码跟上面的BitmapShader一样只是把BitmapShader换成了LinearGradient而已：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** LinearGradient(left, top, right, bottom, Color.RED, Color.YELLOW, Shader.TileMode.REPEAT));

上面我们提到过除了BitmapShader外其他子类都有两个构造方法，上面我们用到了

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  LinearGradient(**float** x0, **float** y0, **float** x1, **float** y1, **int** color0, **int** color1, Shader.TileMode tile)

这是LinearGradient最简单的一个构造方法，参数虽多其实很好理解x0和y0表示渐变的起点坐标而x1和y1则表示渐变的终点坐标，这两点都是相对于屏幕坐标系而言的，而color0和color1则表示起点的颜色和终点的颜色，这些即便是213也能懂 - - ……Shader.TileMode上面我们给的是REPEAT重复但是并没有任何效果，这时因为我们渐变的起点和终点都落在了图形的两端，整个渐变shader已经填充了图形所以不起作用，如果我们改改，把终点坐标变一下：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** LinearGradient(left, top, right - RECT\_SIZE, bottom - RECT\_SIZE, Color.RED, Color.YELLOW, Shader.TileMode.REPEAT));

此时我们渐变终点坐标落在了图形的终点上，根据我们的REPEAT模式，会呈现一个渐变重复的效果：  
![Center 7][]

仅仅两种颜色的渐变根本无法满足我们身体的欲望，太单调乏味！我们是不是可以定义多种颜色渐变呢？答案是必须的，LinearGradient的另一个构造方法

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  LinearGradient(**float** x0, **float** y0, **float** x1, **float** y1, **int**\[\] colors, **float**\[\] positions, Shader.TileMode tile)

就为我们实现了这么一个功能：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** LinearGradient(left, top, right, bottom, **new****int**\[\] \{ Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE \}, **new****float**\[\] \{ 0, 0.1F, 0.5F, 0.7F, 0.8F \}, Shader.TileMode.MIRROR));

![Center 8][]

前面四个参数也是定义坐标的不扯了colors是一个int型数组，我们用来定义所有渐变的颜色，positions表示的是渐变的相对区域，其取值只有0到1，上面的代码中我们定义了一个\[0, 0.1F, 0.5F, 0.7F, 0.8F\]，意思就是红色到黄色的渐变起点坐标在整个渐变区域（left, top, right, bottom定义了渐变的区域）的起点，而终点则在渐变区域长度 \* 10%的地方，而黄色到绿色呢则从渐变区域10%开始到50%的地方以此类推，positions可以为空：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** LinearGradient(left, top, right, bottom, **new****int**\[\] \{ Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE \}, **null**, Shader.TileMode.MIRROR));

为空时各种颜色的渐变将会均分整个渐变区域：  
![Center 9][]

实际应用中线性渐变也是一个非常好玩的东西，比如哦我们呢可以通过它和混合模式一起制作我们常见的图片倒影效果：

![Center 10][]

效果并不复杂实现也非常简单：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** ReflectView **extends** View \{ 
2.  **private** Bitmap mSrcBitmap, mRefBitmap;// 位图
3.  **private** Paint mPaint;// 画笔
4.  **private** PorterDuffXfermode mXfermode;// 混合模式
5.  
6.  **private****int** x, y;// 位图起点坐标
7.  
8.  **public** ReflectView(Context context, AttributeSet attrs) \{ 
9.  **super**(context, attrs); 
10. 
11. // 初始化资源
12.  initRes(context); 
13.  \} 
14. 
15. /\*
16.  \* 初始化资源
17.  \*/
18. **private****void** initRes(Context context) \{ 
19. // 获取源图
20.  mSrcBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.gril); 
21. 
22. // 实例化一个矩阵对象
23.  Matrix matrix = **new** Matrix(); 
24.  matrix.setScale(1F, -1F); 
25. 
26. // 生成倒影图
27.  mRefBitmap = Bitmap.createBitmap(mSrcBitmap, 0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight(), matrix, **true**); 
28. 
29. **int** screenW = MeasureUtil.getScreenSize((Activity) context)\[0\]; 
30. **int** screenH = MeasureUtil.getScreenSize((Activity) context)\[1\]; 
31. 
32.  x = screenW / 2 \- mSrcBitmap.getWidth() / 2; 
33.  y = screenH / 2 \- mSrcBitmap.getHeight() / 2; 
34. 
35. // ………………………………
36.  mPaint = **new** Paint(); 
37.  mPaint.setShader(**new** LinearGradient(x, y + mSrcBitmap.getHeight(), x, y + mSrcBitmap.getHeight() + mSrcBitmap.getHeight() / 4, 0xAA000000, Color.TRANSPARENT, Shader.TileMode.CLAMP)); 
38. 
39. // ………………………………
40.  mXfermode = **new** PorterDuffXfermode(PorterDuff.Mode.DST\_IN); 
41.  \} 
42. 
43. @Override
44. **protected****void** onDraw(Canvas canvas) \{ 
45.  canvas.drawColor(Color.BLACK); 
46.  canvas.drawBitmap(mSrcBitmap, x, y, **null**); 
47. 
48. **int** sc = canvas.saveLayer(x, y + mSrcBitmap.getHeight(), x + mRefBitmap.getWidth(), y + mSrcBitmap.getHeight() \* 2, **null**, Canvas.ALL\_SAVE\_FLAG); 
49. 
50.  canvas.drawBitmap(mRefBitmap, x, y + mSrcBitmap.getHeight(), **null**); 
51. 
52.  mPaint.setXfermode(mXfermode); 
53. 
54.  canvas.drawRect(x, y + mSrcBitmap.getHeight(), x + mRefBitmap.getWidth(), y + mSrcBitmap.getHeight() \* 2, mPaint); 
55. 
56.  mPaint.setXfermode(**null**); 
57. 
58.  canvas.restoreToCount(sc); 
59.  \} 
60. \}

SweepGradient  
的意思是梯度渐变，也称之为扫描式渐变，因为其效果有点类似雷达的扫描效果，他也有两个构造方法：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  SweepGradient(**float** cx, **float** cy, **int** color0, **int** color1)

其实都跟LinearGradient差不多的，简直没什么可说的，直接上效果跳过无聊的讲解：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** SweepGradient(screenX, screenY, Color.RED, Color.YELLOW));

![Center 11][]

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  SweepGradient(**float** cx, **float** cy, **int**\[\] colors, **float**\[\] positions)

类似，不重复浪费口水：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** SweepGradient(screenX, screenY, **new****int**\[\] \{ Color.GREEN, Color.WHITE, Color.GREEN \}, **null**));

![Center 12][]  
RadialGradient

径向渐变，径向渐变说的简单点就是个圆形中心向四周渐变的效果，他也一样有两个构造方法……艾玛！我都要吐了……

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  RadialGradient (**float** centerX, **float** centerY, **float** radius, **int** centerColor, **int** edgeColor, Shader.TileMode tileMode)

简单，一看就懂，例子劳资都懒得上了，屮！

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  RadialGradient (**float** centerX, **float** centerY, **float** radius, **int** centerColor, **int** edgeColor, Shader.TileMode tileMode)

同上！还是说点有意思的，来个妹子养养眼：

![Center 13][]

是不是很漂亮？不过哥压根不放在眼里，哥女朋友比她更漂亮~~好，我们应用1/6里学到的知识给她校校色，因为这张图片的颜色实在太过鲜艳了不符合小清新的LOMO风格~~~~

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** DreamEffectView **extends** View \{ 
2.  **private** Paint mBitmapPaint;// 位图画笔
3.  **private** Bitmap mBitmap;// 位图
4.  **private** PorterDuffXfermode mXfermode;// 图形混合模式
5.  **private****int** x, y;// 位图起点坐标
6.  **private****int** screenW, screenH;// 屏幕宽高
7.  
8.  **public** DreamEffectView(Context context, AttributeSet attrs) \{ 
9.  **super**(context, attrs); 
10. 
11. // 初始化资源
12.  initRes(context); 
13. 
14. // 初始化画笔
15.  initPaint(); 
16.  \} 
17. 
18. /\*\*
19.  \* 初始化资源
20.  \* 
21.  \* @param context
22.  \* 丢你螺母
23.  \*/
24. **private****void** initRes(Context context) \{ 
25. // 获取位图
26.  mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.gril); 
27. 
28. // 实例化混合模式
29.  mXfermode = **new** PorterDuffXfermode(PorterDuff.Mode.SCREEN); 
30. 
31.  screenW = MeasureUtil.getScreenSize((Activity) context)\[0\]; 
32.  screenH = MeasureUtil.getScreenSize((Activity) context)\[1\]; 
33. 
34.  x = screenW / 2 \- mBitmap.getWidth() / 2; 
35.  y = screenH / 2 \- mBitmap.getHeight() / 2; 
36.  \} 
37. 
38. /\*\*
39.  \* 初始化画笔
40.  \*/
41. **private****void** initPaint() \{ 
42. // 实例化画笔
43.  mBitmapPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
44. 
45. // 去饱和、提亮、色相矫正
46.  mBitmapPaint.setColorFilter(**new** ColorMatrixColorFilter(**new****float**\[\] \{ 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F, 0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 \})); 
47.  \} 
48. 
49. @Override
50. **protected****void** onDraw(Canvas canvas) \{ 
51.  canvas.drawColor(Color.BLACK); 
52. 
53. // 新建图层
54. **int** sc = canvas.saveLayer(x, y, x + mBitmap.getWidth(), y + mBitmap.getHeight(), **null**, Canvas.ALL\_SAVE\_FLAG); 
55. 
56. // 绘制混合颜色
57.  canvas.drawColor(0xcc1c093e); 
58. 
59. // 设置混合模式
60.  mBitmapPaint.setXfermode(mXfermode); 
61. 
62. // 绘制位图
63.  canvas.drawBitmap(mBitmap, x, y, mBitmapPaint); 
64. 
65. // 还原混合模式
66.  mBitmapPaint.setXfermode(**null**); 
67. 
68. // 还原画布
69.  canvas.restoreToCount(sc); 
70.  \} 
71. \}

这样感觉是不是好很多了呢？  
![Center 14][]  
  
类似的效果在一些相机特效中称之为梦幻，我最近在做的一个开源相机项目也有类似的效果。但是这样的效果好像还凑合，但是整张图片没重点，我们可以模拟单反相机的暗角效果，压暗图片周围的颜色亮度提亮中心，让整张图片的中心突出来！实现方式有很多种，比如1/4我们提到过的BlurMsakFilter向内模糊就可以得到一个类似的效果，但是BlurMsakFilter计算出来的像素太生硬毫无生气，这里我们就使用RadialGradient来模拟一下下赑屃：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** DreamEffectView **extends** View \{ 
2.  **private** Paint mBitmapPaint, mShaderPaint;// 位图画笔和Shader图形的画笔
3.  **private** Bitmap mBitmap;// 位图
4.  **private** PorterDuffXfermode mXfermode;// 图形混合模式
5.  **private****int** x, y;// 位图起点坐标
6.  **private****int** screenW, screenH;// 屏幕宽高
7.  
8.  **public** DreamEffectView(Context context, AttributeSet attrs) \{ 
9.  **super**(context, attrs); 
10. 
11. // 初始化资源
12.  initRes(context); 
13. 
14. // 初始化画笔
15.  initPaint(); 
16.  \} 
17. 
18. /\*\*
19.  \* 初始化资源
20.  \* 
21.  \* @param context
22.  \* 丢你螺母
23.  \*/
24. **private****void** initRes(Context context) \{ 
25. // 获取位图
26.  mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.gril); 
27. 
28. // 实例化混合模式
29.  mXfermode = **new** PorterDuffXfermode(PorterDuff.Mode.SCREEN); 
30. 
31.  screenW = MeasureUtil.getScreenSize((Activity) context)\[0\]; 
32.  screenH = MeasureUtil.getScreenSize((Activity) context)\[1\]; 
33. 
34.  x = screenW / 2 \- mBitmap.getWidth() / 2; 
35.  y = screenH / 2 \- mBitmap.getHeight() / 2; 
36.  \} 
37. 
38. /\*\*
39.  \* 初始化画笔
40.  \*/
41. **private****void** initPaint() \{ 
42. // 实例化画笔
43.  mBitmapPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
44. 
45. // 去饱和、提亮、色相矫正
46.  mBitmapPaint.setColorFilter(**new** ColorMatrixColorFilter(**new****float**\[\] \{ 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F, 0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 \})); 
47. 
48. // 实例化Shader图形的画笔
49.  mShaderPaint = **new** Paint(); 
50. 
51. // 设置径向渐变，渐变中心当然是图片的中心也是屏幕中心，渐变半径我们直接拿图片的高度但是要稍微小一点
52. // 中心颜色为透明而边缘颜色为黑色
53.  mShaderPaint.setShader(**new** RadialGradient(screenW / 2, screenH / 2, mBitmap.getHeight() \* 7 / 8, Color.TRANSPARENT, Color.BLACK, Shader.TileMode.CLAMP)); 
54.  \} 
55. 
56. @Override
57. **protected****void** onDraw(Canvas canvas) \{ 
58.  canvas.drawColor(Color.BLACK); 
59. 
60. // 新建图层
61. **int** sc = canvas.saveLayer(x, y, x + mBitmap.getWidth(), y + mBitmap.getHeight(), **null**, Canvas.ALL\_SAVE\_FLAG); 
62. 
63. // 绘制混合颜色
64.  canvas.drawColor(0xcc1c093e); 
65. 
66. // 设置混合模式
67.  mBitmapPaint.setXfermode(mXfermode); 
68. 
69. // 绘制位图
70.  canvas.drawBitmap(mBitmap, x, y, mBitmapPaint); 
71. 
72. // 还原混合模式
73.  mBitmapPaint.setXfermode(**null**); 
74. 
75. // 还原画布
76.  canvas.restoreToCount(sc); 
77. 
78. // 绘制一个跟图片大小一样的矩形
79.  canvas.drawRect(x, y, x + mBitmap.getWidth(), y + mBitmap.getHeight(), mShaderPaint); 
80.  \} 
81. \}

Look Look~~是不是效果更好了呢？四周的亮度被无情地压了下去，重点直接呈现在中心  
![Center 15][]

所以……大家一定要活用工具~~~~善于组合思考！说起组合，接下来Shader的最后一个子类简直就是组合他妈生的

ComposeShader

就是组合Shader的意思，顾名思义就是两个Shader组合在一起作为一个新Shader……老掉牙的剧情是吧！同样，这锤子玩意也有两个构造方法

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  ComposeShader (Shader shaderA, Shader shaderB, Xfermode mode) 
2.  ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode)

两个都差不多的，只不过一个指定了只能用PorterDuff的混合模式而另一个只要是Xfermode下的混合模式都没问题！上面我们为米女图片加暗角的时候只是单纯地使用了一下径向渐变，但是其实实际获得的效果并不好，因为我们应用的径向渐变是个圆形的，但是我们的图片实际上是个竖向矩形的，直接往上面“盖”一个径向渐变实际效果简而言之应该是这样的：  
![Center 16][]

可见渐变的坡度太平缓了，不符合我们的Style，能不能改一下让它拉伸下变成一个竖向的椭圆形呢？比如下图这样的：

![Center 17][]

我们来试试看：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** DreamEffectView **extends** View \{ 
2.  **private** Paint mBitmapPaint, mShaderPaint;// 位图画笔和Shader图形的画笔
3.  **private** Bitmap mBitmap, darkCornerBitmap;// 源图的Bitmap和我们自己画的暗角Bitmap
4.  **private** PorterDuffXfermode mXfermode;// 图形混合模式
5.  **private****int** x, y;// 位图起点坐标
6.  **private****int** screenW, screenH;// 屏幕宽高
7.  
8.  **public** DreamEffectView(Context context, AttributeSet attrs) \{ 
9.  **super**(context, attrs); 
10. 
11. // 初始化资源
12.  initRes(context); 
13. 
14. // 初始化画笔
15.  initPaint(); 
16.  \} 
17. 
18. /\*\*
19.  \* 初始化资源
20.  \* 
21.  \* @param context
22.  \* 丢你螺母
23.  \*/
24. **private****void** initRes(Context context) \{ 
25. // 获取位图
26.  mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.gril); 
27. 
28. // 实例化混合模式
29.  mXfermode = **new** PorterDuffXfermode(PorterDuff.Mode.SCREEN); 
30. 
31.  screenW = MeasureUtil.getScreenSize((Activity) context)\[0\]; 
32.  screenH = MeasureUtil.getScreenSize((Activity) context)\[1\]; 
33. 
34.  x = screenW / 2 \- mBitmap.getWidth() / 2; 
35.  y = screenH / 2 \- mBitmap.getHeight() / 2; 
36.  \} 
37. 
38. /\*\*
39.  \* 初始化画笔
40.  \*/
41. **private****void** initPaint() \{ 
42. // 实例化画笔
43.  mBitmapPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
44. 
45. // 去饱和、提亮、色相矫正
46.  mBitmapPaint.setColorFilter(**new** ColorMatrixColorFilter(**new****float**\[\] \{ 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F, 0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 \})); 
47. 
48. // 实例化Shader图形的画笔
49.  mShaderPaint = **new** Paint(); 
50. 
51. // 根据我们源图的大小生成暗角Bitmap
52.  darkCornerBitmap = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB\_8888); 
53. 
54. // 将该暗角Bitmap注入Canvas
55.  Canvas canvas = **new** Canvas(darkCornerBitmap); 
56. 
57. // 计算径向渐变半径
58. **float** radiu = canvas.getHeight() \* (2F / 3F); 
59. 
60. // 实例化径向渐变
61.  RadialGradient radialGradient = **new** RadialGradient(canvas.getWidth() / 2F, canvas.getHeight() / 2F, radiu, **new****int**\[\] \{ 0, 0, 0xAA000000 \}, **new****float**\[\] \{ 0F, 0.7F, 1.0F \}, Shader.TileMode.CLAMP); 
62. 
63. // 实例化一个矩阵
64.  Matrix matrix = **new** Matrix(); 
65. 
66. // 设置矩阵的缩放
67.  matrix.setScale(canvas.getWidth() / (radiu \* 2F), 1.0F); 
68. 
69. // 设置矩阵的预平移
70.  matrix.preTranslate(((radiu \* 2F) - canvas.getWidth()) / 2F, 0); 
71. 
72. // 将该矩阵注入径向渐变
73.  radialGradient.setLocalMatrix(matrix); 
74. 
75. // 设置画笔Shader
76.  mShaderPaint.setShader(radialGradient); 
77. 
78. // 绘制矩形
79.  canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mShaderPaint); 
80.  \} 
81. 
82. @Override
83. **protected****void** onDraw(Canvas canvas) \{ 
84.  canvas.drawColor(Color.BLACK); 
85. 
86. // 新建图层
87. **int** sc = canvas.saveLayer(x, y, x + mBitmap.getWidth(), y + mBitmap.getHeight(), **null**, Canvas.ALL\_SAVE\_FLAG); 
88. 
89. // 绘制混合颜色
90.  canvas.drawColor(0xcc1c093e); 
91. 
92. // 设置混合模式
93.  mBitmapPaint.setXfermode(mXfermode); 
94. 
95. // 绘制位图
96.  canvas.drawBitmap(mBitmap, x, y, mBitmapPaint); 
97. 
98. // 还原混合模式
99.  mBitmapPaint.setXfermode(**null**); 
100. 
101. // 还原画布
102.  canvas.restoreToCount(sc); 
103. 
104. // 绘制我们画好的径向渐变图
105.  canvas.drawBitmap(darkCornerBitmap, x, y, **null**); 
106.  \} 
107. \}

运行一下可以看到如下结果：  
![Center 18][]

是不是感脚暗角比上面我们做的那个更Perfect？图片中心大部分区域不受任何干扰只把四角边缘处的亮度压了下去，当然这个效果对哥来说也不是很满意，不过先将就凑合着 = = 。上例中我们使用到了两个东西，一个是在独立的Canvas中绘制自己的Bitmap，在哥下一节我们就会详细讲到这里就先不扯了，而另一个则是我们说的重点：Matrix，其实在上面我们做倒影的时候已经简单地使用过了Matrix，那么Matrix究竟是什么呢？其中文直译为矩阵，而我更愿意称之为矩阵变换或者图形变换，它和我们1/6中学到的图形的混合可谓是双簧，同样地重要！

在本文的开头哥给大家挖了一个坑，在讲BitmapShader的时候我们在

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

的模式下得到了如下这样狗吃屎的效果：  
![Center 19][]

不知道大家有没有质疑过为什么？如果没有，情有可原！但是在我们使用另外两种模式REPEAT和MIRROR的时候难道大家就没想过为什么我们的位图会像那样重复或者镜像吗？是必须那样吗？那个例子中我们使用的是一个边长为800置于屏幕中心的矩形，我们何不尝试将其铺满屏幕看看？

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** ShaderView **extends** View \{ 
2.  **private****static****final****int** RECT\_SIZE = 400;// 矩形尺寸的一半
3.  
4.  **private** Paint mPaint;// 画笔
5.  
6.  **private****int** left, top, right, bottom;// 矩形坐上右下坐标
7.  **private****int** screenX, screenY; 
8.  
9.  **public** ShaderView(Context context, AttributeSet attrs) \{ 
10. **super**(context, attrs); 
11. 
12. // 获取屏幕尺寸数据
13. **int**\[\] screenSize = MeasureUtil.getScreenSize((Activity) context); 
14. 
15. // 获取屏幕中点坐标
16.  screenX = screenSize\[0\] / 2; 
17.  screenY = screenSize\[1\] / 2; 
18. 
19. // 计算矩形左上右下坐标值
20.  left = screenX - RECT\_SIZE; 
21.  top = screenY - RECT\_SIZE; 
22.  right = screenX + RECT\_SIZE; 
23.  bottom = screenY + RECT\_SIZE; 
24. 
25. // 实例化画笔
26.  mPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
27. 
28. // 获取位图
29.  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a); 
30. 
31. // 设置着色器
32.  mPaint.setShader(**new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); 
33. // mPaint.setShader(new LinearGradient(left, top, right - RECT\_SIZE, bottom - RECT\_SIZE, Color.RED, Color.YELLOW, Shader.TileMode.MIRROR));
34. // mPaint.setShader(new LinearGradient(left, top, right, bottom, new int\[\] \{ Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE \}, null, Shader.TileMode.MIRROR));
35. // mPaint.setShader(new SweepGradient(screenX, screenY, Color.RED, Color.YELLOW));
36. // mPaint.setShader(new SweepGradient(screenX, screenY, new int\[\] \{ Color.GREEN, Color.WHITE, Color.GREEN \}, null));
37.  \} 
38. 
39. @Override
40. **protected****void** onDraw(Canvas canvas) \{ 
41. // 绘制矩形
42. // canvas.drawRect(left, top, right, bottom, mPaint);
43.  canvas.drawRect(0, 0, screenX \* 2, screenY \* 2, mPaint); 
44.  \} 
45. \}

看看效果：  
![Center 20][]

是不是忽然明白了什么？好了，你可以从坑里爬出来了…………这样看是不是懂了？BitmapShader是从画布的左上方开始着色，回到我们刚才的问题，这个着色方式必须是这样的么？显然不是！在Shader类中有一对setter和getter方法：setLocalMatrix(Matrix localM)和getLocalMatrix(Matrix localM)我们可以利用它们来设置或获取Shader的变换矩阵，比如上面的例子我还是绘制成一个边长为800的矩形：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** ShaderView **extends** View \{ 
2.  **private****static****final****int** RECT\_SIZE = 400;// 矩形尺寸的一半
3.  
4.  **private** Paint mPaint;// 画笔
5.  
6.  **private****int** left, top, right, bottom;// 矩形坐上右下坐标
7.  **private****int** screenX, screenY; 
8.  
9.  **public** ShaderView(Context context, AttributeSet attrs) \{ 
10. **super**(context, attrs); 
11. 
12. // 获取屏幕尺寸数据
13. **int**\[\] screenSize = MeasureUtil.getScreenSize((Activity) context); 
14. 
15. // 获取屏幕中点坐标
16.  screenX = screenSize\[0\] / 2; 
17.  screenY = screenSize\[1\] / 2; 
18. 
19. // 计算矩形左上右下坐标值
20.  left = screenX - RECT\_SIZE; 
21.  top = screenY - RECT\_SIZE; 
22.  right = screenX + RECT\_SIZE; 
23.  bottom = screenY + RECT\_SIZE; 
24. 
25. // 实例化画笔
26.  mPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
27. 
28. // 获取位图
29.  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a); 
30. 
31. // 实例化一个Shader
32.  BitmapShader bitmapShader = **new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); 
33. 
34. // 实例一个矩阵对象
35.  Matrix matrix = **new** Matrix(); 
36. 
37. // 设置矩阵变换
38.  matrix.setTranslate(left, top); 
39. 
40. // 设置Shader的变换矩阵
41.  bitmapShader.setLocalMatrix(matrix); 
42. 
43. // 设置着色器
44.  mPaint.setShader(bitmapShader); 
45. // mPaint.setShader(new LinearGradient(left, top, right - RECT\_SIZE, bottom - RECT\_SIZE, Color.RED, Color.YELLOW, Shader.TileMode.MIRROR));
46. // mPaint.setShader(new LinearGradient(left, top, right, bottom, new int\[\] \{ Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE \}, null, Shader.TileMode.MIRROR));
47. // mPaint.setShader(new SweepGradient(screenX, screenY, Color.RED, Color.YELLOW));
48. // mPaint.setShader(new SweepGradient(screenX, screenY, new int\[\] \{ Color.GREEN, Color.WHITE, Color.GREEN \}, null));
49.  \} 
50. 
51. @Override
52. **protected****void** onDraw(Canvas canvas) \{ 
53. // 绘制矩形
54.  canvas.drawRect(left, top, right, bottom, mPaint); 
55. // canvas.drawRect(0, 0, screenX \* 2, screenY \* 2, mPaint);
56.  \} 
57. \}

不一样的是我在给画笔设置着色器前为我们的着色器设置了一个变换矩阵，让我们的Shader依据自身的坐标→平移left个单位↓平移top个单位，也就是说原本shader的原点应该是画布（注意不是屏幕！这里只是刚好画布更屏幕重合了而已！切记！）的左上方\[0,0\]的位置，通过变换移至了\[left,top\]的位置，如果没问题，Shader此时应该是刚好是从我们矩形的左上方开始着色：  
![Center 21][]

Is anyone has question yet？是不是感觉有点儿懂Matrix了？Really？

其实说了半天我们依然没进入到Matrix的本质，在1/6中我们学习了一个和它比较类似的玩意叫做ColorMatrix大家还记得否？我在讲ColorMatrix的时候说过其是一个4x5的颜色矩阵，而同样，我们的Matrix也是一个矩阵，只不过不是4\*5而是3\*3的位置坐标矩阵：

![Center 22][]

变换变换，既然说到变换那么必定涉及最基本的旋转啊、缩放啊、平移之类，而在Matrix中除了该三者还多了一种:错切，什么叫错切呢？所谓错切数学中也称之为剪切变换，原理呢就是将图形上所有点的X/Y坐标保持不变而按比例平移Y/X坐标，并且平移的大小和某点到X/Y轴的垂直距离成正比，变换前后图形的面积不变。其实对于Matrix可以这样说：图形的变换实质上就是图形上点的变换，而我们的Matrix的计算也正是基于此，比如点P(x0,y0)经过上面的矩阵变换后会去到P(x,y)的位置：

![Center 23][]

注：除了平移外，缩放、旋转、错切、透视都是需要一个中心点作为参照的，如果没有平移，默认为图形的\[0,0\]点，平移只需要指定移动的距离即可，平移操作会改变中心点的位置！非常重要！记牢了！

PS：唉……说实话矩阵的计算原理真心不想写……不过算是个小总结吧，爱看看不爱看直接跳过即可……

有一点需要注意的是，矩阵的乘法运算是不符合交换律的，因此矩阵B\*A和A\*B是两个截然不同的结果，前者表示A右乘B，是列变换；后者表示A左乘B，是行变换。如果有心的童鞋会发现Matrix类中会有三大类方法：setXXX、preXXX和postXXX，而preXXX和postXXX就是分别表示矩阵的左右乘，也有前后乘的说法，对于不懂矩阵的人来说都一样 = = ……但是要注意一点！！！大家在理解Matrix的时候要把它想象成一个容器，什么容器呢？存放我们变换信息的容器，Matrix的所有方法都是针对其自身的！！！！当我们把所有的变换操作做完后再“一次性地”把它注入我们想要的地方，比如上面我们为shader注入了一个Matrix。还有一点要注意，一定要注意：ColorMatrix和Matrix在应用给其他对象时都是左乘的，而其自身内部是可以左右乘的！千万别搞混了！UnderStand？一定要理解这一点，不然我只能哭晕在厕所了压根没法讲下去你也不会听的懂……

上图的公式中，GHI都表示的是透视参数，一般情况下我们不会去处理，三维的透视我更乐意使用Camare，所以很多时候G和H的值都为0而I的值恒为1，至于为什么如果有时间待会会说。

所有的Matrix变换中最好理解的其实是缩放变换，因为缩放的本质其实就是图形上所有的点X/Y轴沿着中心点放大一定的倍数，比如：

![Center 24][]

这么一个矩阵变换实质就是x = x0 \* a、y = y0 \* b，难度系数：0

![Center 25][]

X/Y轴分别放大a\\b倍

相对来说平移稍难但是也好理解：

![Center 26][]

同理x = x0 + a、y = y0 + b，难度系数：0

![Center 27][]

X/Y轴分别平移！￥￥%\#%……%……\#￥%￥%

旋转就很复杂了……分为两种：一种是直接绕默认中点\[0,0\]旋转，另一种是指定中点，也就是将中点\[0,0\]平移后在旋转：

直接绕\[0,0\]顺时针转：

![Center 28][]

唉、这个先看图吧：

![Center 29][]

根据三角函数的关系我们可以得出p(x,y)的坐标：

![Center 30][]

同样根据三角函数的关系我们也可以得出p(x0,y0)的坐标：

![Center 31][]

上述两公式结合我们则可以得出简化后的p(x,y)的坐标：

![Center 32][]

这是什么公式呢？是不是就是上面矩阵的乘积呢？囧……

绕点p(a,b)顺时针转：

其实绕某个点旋转没有想象中的那么复杂，相对于绕中心点来说就多了两步：先将坐标原点移到我们的p(a,b)处然后执行旋转最后再把坐标圆点移回去：

![Center 33][]

对了……开头忘说了……矩阵的乘法是从右边开始的，额，其实也只有上面这算式才有多个矩阵相乘 = = 冏，也就是说最右边的两个会先乘，大家看看最右边的两个乘积是什么……是不是就是我们把原点移动到P(a,b)后\[x0,y0\]的新坐标啊？然后继续往左乘，旋转一定得角度这跟上面\[0,0\]旋转是一样的，最后往左乘把坐标还原

![Center 34][]

不扯了，你听得懂甚好！不懂没关系！真的没关系！哥不骗你！哥从不骗妹子……

哎……错切我也先不说了，大家听了这么多槽点是不是头都大了？麻痹的做个变换还这么麻烦劳资TM还不如不做！是的，这样去做变换真心太麻烦！要是开发[Android][]这么麻烦的话特么谁还玩？所以这些复杂繁琐的扑街玩意Android早就为我们封装好了……压根就不需要我们去管那么多！上面我们曾提到的setXXX、preXXX和postXXX方法就是Android为我们封装好的针对不同运算的“档位”，那么怎么用呢？非常非常简单，你压根可以现在忘记上面我们说到的各种计算原理，比如，我这里还是拿BitmapShader来说吧，我们想要移动Shader的位置：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MatrixView **extends** View \{ 
2.  **private****static****final****int** RECT\_SIZE = 400;// 矩形尺寸的一半
3.  
4.  **private** Paint mPaint;// 画笔
5.  
6.  **private****int** left, top, right, bottom;// 矩形坐上右下坐标
7.  **private****int** screenX, screenY; 
8.  
9.  **public** MatrixView(Context context, AttributeSet attrs) \{ 
10. **super**(context, attrs); 
11. 
12. // 获取屏幕尺寸数据
13. **int**\[\] screenSize = MeasureUtil.getScreenSize((Activity) context); 
14. 
15. // 获取屏幕中点坐标
16.  screenX = screenSize\[0\] / 2; 
17.  screenY = screenSize\[1\] / 2; 
18. 
19. // 计算矩形左上右下坐标值
20.  left = screenX - RECT\_SIZE; 
21.  top = screenY - RECT\_SIZE; 
22.  right = screenX + RECT\_SIZE; 
23.  bottom = screenY + RECT\_SIZE; 
24. 
25. // 实例化画笔
26.  mPaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG); 
27. 
28. // 获取位图
29.  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a); 
30. 
31. // 实例化一个Shader
32.  BitmapShader bitmapShader = **new** BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); 
33. 
34. // 实例一个矩阵对象
35.  Matrix matrix = **new** Matrix(); 
36. 
37. // 设置矩阵变换
38.  matrix.setTranslate(500, 500); 
39. 
40. // 设置Shader的变换矩阵
41.  bitmapShader.setLocalMatrix(matrix); 
42. 
43. // 设置着色器
44.  mPaint.setShader(bitmapShader); 
45.  \} 
46. 
47. @Override
48. **protected****void** onDraw(Canvas canvas) \{ 
49. // 绘制矩形
50. // canvas.drawRect(left, top, right, bottom, mPaint);
51.  canvas.drawRect(0, 0, screenX \* 2, screenY \* 2, mPaint); 
52.  \} 
53. \}

这段代码其实跟前面的有点类似，不纠结，我们只是简单地在Matrix中做了个平移：  
![Center 35][]

效果也很简单，那我们再来个旋转5度？

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  // 设置矩阵变换
2.  matrix.setTranslate(500, 500); 
3.  matrix.setRotate(5);

完事后看看效果尼玛怎么是介个样子？说好的平移呢？被狗吃了？

![Center 36][]

Why？其实是这样的，在我们new了一个Matrix对象后，这个Matrix对象中已经就为我们封装了一组原始数据：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **float**\[\]\{ 
2.  1, 0, 0
3.  0, 1, 0
4.  0, 0, 1
5.  \}

而我们的setXXX方法执行的操作是把原本Matrix对象中的数据重置，重新设置新的数据，比如：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.setTranslate(500, 500);

后数据即变为：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **float**\[\]\{ 
2.  1, 0, 500
3.  0, 1, 500
4.  0, 0, 1
5.  \}

而如果再旋转了呢？比如我们上面的：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.setTranslate(500, 500); 
2.  matrix.setRotate(5);

那旋转的数据就会直接覆盖掉我们平移的数据：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **float**\[\]\{ 
2.   cos, sin, 0
3.   sin, cos, 0
4.  0, 0, 1
5.  \}

具体参数值我也就不计算了，从这里大家也可以看出Android给我们封装的方法是多么的体贴到位~~~你只需要setRotate个角度即可压根就不需要你关心如何去算的对吧？我们来看另外的两个方法preXXX和postXXX，这里我把setRotate换成preRotate：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.setTranslate(500, 500); 
2.  matrix.preRotate(5);

和

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.setTranslate(500, 500); 
2.  matrix.postRotate(5);

![Center 37][]  
好像没啥区别啊？看不出有什么特别的对吧？其实呢这是一个谁先谁后的问题，preXXX和postXXX我们之前说过一个是前乘一个是后乘，那么具体表现是什么样的呢？，非常简单，比如我有如下代码

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.preScale(0.5f, 1); 
2.  matrix.setScale(1, 0.6f); 
3.  matrix.postScale(0.7f, 1); 
4.  matrix.preTranslate(15, 0);

那么Matrix的计算过程即为：translate (15, 0) -> scale (1, 0.6f) -> scale (0.7f, 1)，我们说过set会重置数据，所以最开始的

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.preScale(0.5f, 1);

也就GG了

同样地，对于类似的变换：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.preScale(0.5f, 1); 
2.  matrix.preTranslate(10, 0); 
3.  matrix.postScale(0.7f, 1); 
4.  matrix.postTranslate(15, 0);

其计算过程为：translate (10, 0) -> scale (0.5f, 1) -> scale (0.7f, 1) -> translate (15, 0)，是不是很简单呢？你一定不傻逼对吧！  
那么对于上图的结果真的是一样的吗？这里我教给大家一个方法自己去验证，Matrix有一个getValues方法可以获取当前Matrix的变换浮点数组，也就是我们之前说的矩阵：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  /\*
2.   \* 新建一个9个单位长度的浮点数组
3.   \* 因为我们的Matrix矩阵是9个单位长的对吧
4.   \*/
5.  **float**\[\] fs = **new****float**\[9\]; 
6.  
7.  // 将从matrix中获取到的浮点数组装载进我们的fs里
8.  matrix.getValues(fs); 
9.  Log.d("Aige", Arrays.toString(fs));// 输出看看呗！

大家觉得好奇的都可以去验证，这三类方法我就不多说了，Matrix中还有其他很多实用的方法，以后我们用到的时候在讲，因为Matrix太常用了~~~~

现在，大家回过头去再看看我给妹子图加暗角的那段代码，里面关于Matrix的操作能大致看懂了么：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  // 计算径向渐变半径
2.  **float** radiu = canvas.getHeight() \* (2F / 3F); 
3.  
4.  // 实例化径向渐变
5.  RadialGradient radialGradient = **new** RadialGradient(canvas.getWidth() / 2F, canvas.getHeight() / 2F, radiu, **new****int**\[\] \{ 0, 0, 0xAA000000 \}, **new****float**\[\] \{ 0F, 0.7F, 1.0F \}, Shader.TileMode.CLAMP); 
6.  
7.  // 实例化一个矩阵
8.  Matrix matrix = **new** Matrix(); 
9.  
10. // 设置矩阵的缩放
11. matrix.setScale(canvas.getWidth() / (radiu \* 2F), 1.0F); 
12. 
13. // 设置矩阵的预平移
14. matrix.preTranslate(((radiu \* 2F) - canvas.getWidth()) / 2F, 0); 
15. 
16. // 将该矩阵注入径向渐变
17. radialGradient.setLocalMatrix(matrix); 
18. 
19. // 设置画笔Shader
20. mShaderPaint.setShader(radialGradient);

是不是灰常滴简单呢？这里其实你只要注意我们除了平移所有变换操作都是基于一个原点的即可！找对原点你就成功一大半了！  
好了，对Matrix的一个简单介绍就到这里，正如我所说，Matrix的应用是相当广泛的，不仅仅是在我们的Shader，我们的canvas也有setMatrix(matrix)方法来设置矩阵变换，更常见的是在ImageView中对ImageView进行变换，当我们手指在屏幕上划过一定的距离后根据这段距离来平移我们的控件，根据两根手指之间拉伸的距离和相对于上一次旋转的角度来缩放旋转我们的图片：

![20150113163500765][]

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MatrixImageView **extends** ImageView \{ 
2.  **private****static****final****int** MODE\_NONE = 0x00123;// 默认的触摸模式
3.  **private****static****final****int** MODE\_DRAG = 0x00321;// 拖拽模式
4.  **private****static****final****int** MODE\_ZOOM = 0x00132;// 缩放or旋转模式
5.  
6.  **private****int** mode;// 当前的触摸模式
7.  
8.  **private****float** preMove = 1F;// 上一次手指移动的距离
9.  **private****float** saveRotate = 0F;// 保存了的角度值
10. **private****float** rotate = 0F;// 旋转的角度
11. 
12. **private****float**\[\] preEventCoor;// 上一次各触摸点的坐标集合
13. 
14. **private** PointF start, mid;// 起点、中点对象
15. **private** Matrix currentMatrix, savedMatrix;// 当前和保存了的Matrix对象
16. **private** Context mContext;// Fuck……
17. 
18. **public** MatrixImageView(Context context, AttributeSet attrs) \{ 
19. **super**(context, attrs); 
20. **this**.mContext = context; 
21. 
22. // 初始化
23.  init(); 
24.  \} 
25. 
26. /\*\*
27.  \* 初始化
28.  \*/
29. **private****void** init() \{ 
30. /\*
31.  \* 实例化对象
32.  \*/
33.  currentMatrix = **new** Matrix(); 
34.  savedMatrix = **new** Matrix(); 
35.  start = **new** PointF(); 
36.  mid = **new** PointF(); 
37. 
38. // 模式初始化
39.  mode = MODE\_NONE; 
40. 
41. /\*
42.  \* 设置图片资源
43.  \*/
44.  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mylove); 
45.  bitmap = Bitmap.createScaledBitmap(bitmap, MeasureUtil.getScreenSize((Activity) mContext)\[0\], MeasureUtil.getScreenSize((Activity) mContext)\[1\], **true**); 
46.  setImageBitmap(bitmap); 
47.  \} 
48. 
49. @Override
50. **public****boolean** onTouchEvent(MotionEvent event) \{ 
51. **switch** (event.getAction() & MotionEvent.ACTION\_MASK) \{ 
52. **case** MotionEvent.ACTION\_DOWN:// 单点接触屏幕时
53.  savedMatrix.set(currentMatrix); 
54.  start.set(event.getX(), event.getY()); 
55.  mode = MODE\_DRAG; 
56.  preEventCoor = **null**; 
57. **break**; 
58. **case** MotionEvent.ACTION\_POINTER\_DOWN:// 第二个点接触屏幕时
59.  preMove = calSpacing(event); 
60. **if** (preMove > 10F) \{ 
61.  savedMatrix.set(currentMatrix); 
62.  calMidPoint(mid, event); 
63.  mode = MODE\_ZOOM; 
64.  \} 
65.  preEventCoor = **new****float**\[4\]; 
66.  preEventCoor\[0\] = event.getX(0); 
67.  preEventCoor\[1\] = event.getX(1); 
68.  preEventCoor\[2\] = event.getY(0); 
69.  preEventCoor\[3\] = event.getY(1); 
70.  saveRotate = calRotation(event); 
71. **break**; 
72. **case** MotionEvent.ACTION\_UP:// 单点离开屏幕时
73. **case** MotionEvent.ACTION\_POINTER\_UP:// 第二个点离开屏幕时
74.  mode = MODE\_NONE; 
75.  preEventCoor = **null**; 
76. **break**; 
77. **case** MotionEvent.ACTION\_MOVE:// 触摸点移动时
78. /\*
79.  \* 单点触控拖拽平移
80.  \*/
81. **if** (mode == MODE\_DRAG) \{ 
82.  currentMatrix.set(savedMatrix); 
83. **float** dx = event.getX() - start.x; 
84. **float** dy = event.getY() - start.y; 
85.  currentMatrix.postTranslate(dx, dy); 
86.  \} 
87. /\*
88.  \* 两点触控拖放旋转
89.  \*/
90. **else****if** (mode == MODE\_ZOOM && event.getPointerCount() == 2) \{ 
91. **float** currentMove = calSpacing(event); 
92.  currentMatrix.set(savedMatrix); 
93. /\*
94.  \* 指尖移动距离大于10F缩放
95.  \*/
96. **if** (currentMove > 10F) \{ 
97. **float** scale = currentMove / preMove; 
98.  currentMatrix.postScale(scale, scale, mid.x, mid.y); 
99.  \} 
100. /\*
101.  \* 保持两点时旋转
102.  \*/
103. **if** (preEventCoor != **null**) \{ 
104.  rotate = calRotation(event); 
105. **float** r = rotate - saveRotate; 
106.  currentMatrix.postRotate(r, getMeasuredWidth() / 2, getMeasuredHeight() / 2); 
107.  \} 
108.  \} 
109. **break**; 
110.  \} 
111. 
112.  setImageMatrix(currentMatrix); 
113. **return****true**; 
114.  \} 
115. 
116. /\*\*
117.  \* 计算两个触摸点间的距离
118.  \*/
119. **private****float** calSpacing(MotionEvent event) \{ 
120. **float** x = event.getX(0) - event.getX(1); 
121. **float** y = event.getY(0) - event.getY(1); 
122. **return** (**float**) Math.sqrt(x \* x + y \* y); 
123.  \} 
124. 
125. /\*\*
126.  \* 计算两个触摸点的中点坐标
127.  \*/
128. **private****void** calMidPoint(PointF point, MotionEvent event) \{ 
129. **float** x = event.getX(0) + event.getX(1); 
130. **float** y = event.getY(0) + event.getY(1); 
131.  point.set(x / 2, y / 2); 
132.  \} 
133. 
134. /\*\*
135.  \* 计算旋转角度
136.  \* 
137.  \* @param 事件对象
138.  \* @return 角度值
139.  \*/
140. **private****float** calRotation(MotionEvent event) \{ 
141. **double** deltaX = (event.getX(0) - event.getX(1)); 
142. **double** deltaY = (event.getY(0) - event.getY(1)); 
143. **double** radius = Math.atan2(deltaY, deltaX); 
144. **return** (**float**) Math.toDegrees(radius); 
145.  \} 
146. \}

记得在xml中设置我们MatrixImageView的scaleType="matrix"：

**\[html\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****com.aigestudio.customviewdemo.views.MatrixImageView**
2.  android:layout\_width="match\_parent"
3.  android:layout\_height="match\_parent"
4.  android:scaleType="matrix"**/>**

虽然我们通过Matrix简单地实现了对ImageView的变换操作，但是有一些小BUG，比如我们两指缩放/旋转图片后抬起一只手指，此时应该立即切换回平移模式对吧？但是我们上述的代码中却是终止了各种操作，事件机制虽然我们还没讲，但是我们也在这几节中用到了不少，这个简单的问题你能解决么？  
我在之前讲到大家可以使用Matrix的getValues(float\[\])方法去验证自己不确定的东西，同时呢，我们也可以使用Matrix的setValues(float\[\])方法来直接给Matrix设置一个矩阵数组，like：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  setValues(**new****float**\[\]\{ 
2.  1, 0, 57
3.  0, 1, 78
4.  0, 0, 1
5.  \});

效果跟

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  matrix.setTranslate(57, 78);

是一样的。上面我们说到Matrix矩阵最后的3个数是用来设置透视变换的，为什么最后一个值恒为1？因为其表示的是在Z轴向的透视缩放，这三个值都可以被设置，前两个值跟右手坐标系的XY轴有关，大家可以尝试去发现它们之间的规律，我就不多说了。这里多扯一点，大家一定要学会如何透过现象看本质，即便看到的本质不一定就是实质，但是离实质已经不远了，不要一来就去追求什么底层源码啊、逻辑什么的，就像上面的矩阵变换一样，矩阵的9个数作用其实很多人都说不清，与其听别人胡扯还不如自己动手试试你说是吧，不然苦逼的只是你自己。  
在实际应用中我们极少会使用到Matrix的尾三数做透视变换，更多的是使用Camare摄像机，比如我们使用Camare让ListView看起来像倒下去一样：（这里只做了解，已超出我们本系列的范畴）

**\[html\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****LinearLayout**xmlns:android="http://schemas.android.com/apk/res/android"
2.  android:layout\_width="match\_parent"
3.  android:layout\_height="match\_parent"
4.  android:background="\#FFFFFF"
5.  android:gravity="center"
6.  android:orientation="vertical"**>**
7.  
8.  **<****com.aigestudio.customviewdemo.views.AnimListView**
9.  android:id="@+id/main\_alv"
10. android:layout\_width="match\_parent"
11. android:layout\_height="match\_parent"
12. android:scrollbars="none"**/>**
13. 
14. **</****LinearLayout****>**

自定义ListView重写onDraw：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** AnimListView **extends** ListView \{ 
2.  **private** Camera mCamera; 
3.  **private** Matrix mMatrix; 
4.  
5.  **public** AnimListView(Context context, AttributeSet attrs) \{ 
6.  **super**(context, attrs); 
7.   mCamera = **new** Camera(); 
8.   mMatrix = **new** Matrix(); 
9.   \} 
10. 
11. @Override
12. **protected****void** onDraw(Canvas canvas) \{ 
13.  mCamera.save(); 
14.  mCamera.rotate(30, 0, 0); 
15.  mCamera.getMatrix(mMatrix); 
16.  mMatrix.preTranslate(-getWidth() / 2, -getHeight() / 2); 
17.  mMatrix.postTranslate(getWidth() / 2, getHeight() / 2); 
18.  canvas.concat(mMatrix); 
19. **super**.onDraw(canvas); 
20.  mCamera.restore(); 
21.  \} 
22. \}

在MainActivity中设置数据：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MainActivity **extends** Activity \{ 
2.  
3.  @Override
4.  **public****void** onCreate(Bundle savedInstanceState) \{ 
5.  **super**.onCreate(savedInstanceState); 
6.   setContentView(R.layout.activity\_main); 
7.  
8.   AnimListView animListView = (AnimListView) findViewById(R.id.main\_alv); 
9.   animListView.setAdapter(**new** BaseAdapter() \{ 
10. 
11. @Override
12. **public** View getView(**int** position, View convertView, ViewGroup parent) \{ 
13.  convertView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item, **null**); 
14. **return** convertView; 
15.  \} 
16. 
17. @Override
18. **public****long** getItemId(**int** position) \{ 
19. **return**0; 
20.  \} 
21. 
22. @Override
23. **public** Object getItem(**int** position) \{ 
24. **return****null**; 
25.  \} 
26. 
27. @Override
28. **public****int** getCount() \{ 
29. **return**100; 
30.  \} 
31.  \}); 
32.  \} 
33. \}

效果like below：  
![Center 38][]

好了，Paint所有的方法已经Over了~~~大家是不是觉得终于解放的赶脚呢？别急……还有个Canvas……光学会了如何用笔而不知道画什么有何用呢？不过别急，Canvas我们下一节再细讲，这一节我们算是对Paint来个总结，注意不是了断哦！了断可不行，上一节末尾我留了几张图说要在这一节给大家说怎么在View中画，这一节呢我们来实现它，注意哦，不要指望在这里你会得到一个完美的控件拿去用……我们还没学怎么去测绘View也还没有讲到ViewGroup，So~~~~在这我们只是单纯地先画。

几个图中最难的大概就是那个各种圈圈的了：

![Center 39][]

其他的三个图表千篇一律……会画上面那玩意几个图标简直就是小case，这个圈圈图也是我在群里搜刮的，看不出来是吧，没事，我临摹了一个差不多的：

![Center 40][]

这样看总清晰了吧……大家在自定义一个View的时候不要老想着自己是个Coder，你老是这样想越做不出棒的View，你要把自己看成一个Designer，这个View将会是由你创造的！而不是你敲出了它……本来在这一系列之后我有单独的番外篇叫如何去设计一个控件，今天在做这个圈圈图的时候突然有这么一个想法还是干脆穿插进来说算了，直接粗暴！

既然我们是一个设计者，那么我们必然要有这么一张图纸去概述我们的View，因为一般情况下大家都知道美工跟开发者之间是有代沟的，假如，我是说假如美工花了一个很屌的界面，但是你如果直接按着他给你的设计图照着做你会发现做不出一模一样的来……这时你就该调整自己多去与美工沟通在不大改设计图的前提下把难度降到你能力范围内。同样的，我们这里也一样。假如这个圈圈图是JB美工给你的效果图，叫你照着做，我们不可能真的这样照着做，因为他给的东西对我们来说无规律可循，而对于开发者来说，有规律的东西往往是最简单，这时我们就要“设计和代码相结合”：

![Center 41][]

大家看到我在刚才那张临摹图上做了一些改动，从这张草图上来看改动其实并不大，只是把一些位置啊、大小啊什么的做了一些调整，要记住一点，我们的控件要做到在任何屏幕设备上都能完美使用！而不是像布局、资源图之类的还要做好几套，那就是扯蛋！所以我们这的所有尺寸都是以控件的边长S作为参考依据的：

![Center 42][]

注：因为我们还没讲如何测绘控件，所以我们在自定义View的时候强制控件的长宽一致以简化不必要的口水

还是老套路，先分析一下：控件中心往下是最中心的圆，而其他的六个圆都直接或间接地与其相连，上面的三个是大圆而下面的三个是相对较小的圆，大圆之间的线段是紧挨着的而中心大圆和下面三个小圆之间的线段是有一定距离的，右上方的大圆上方还有一段实体描边弧，弧上有文字，而每个圆内都可以设置文本，大概就是酱紫，那么我们从哪作为插入点呢？当然是中心的那个圆，但是我们知道它的圆心是要往控件中心向下偏移一个半径的：

![Center 43][]

代码如何实现呢？不用我说你也应该知道：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MultiCricleView **extends** View \{ 
2.  **private****static****final****float** STROKE\_WIDTH = 1F / 256F, // 描边宽度占比
3.   LINE\_LENGTH = 3F / 32F, // 线段长度占比
4.   CRICLE\_LARGER\_RADIU = 3F / 32F,// 大圆半径
5.   CRICLE\_SMALL\_RADIU = 5F / 64F,// 小圆半径
6.   ARC\_RADIU = 1F / 8F,// 弧半径
7.   ARC\_TEXT\_RADIU = 5F / 32F;// 弧围绕文字半径
8.  
9.  **private** Paint strokePaint;// 描边画笔
10. 
11. **private****int** size;// 控件边长
12. 
13. **private****float** strokeWidth;// 描边宽度
14. **private****float** ccX, ccY;// 中心圆圆心坐标
15. **private****float** largeCricleRadiu;// 大圆半径
16. 
17. **public** MultiCricleView(Context context, AttributeSet attrs) \{ 
18. **super**(context, attrs); 
19. 
20. // 初始化画笔
21.  initPaint(context); 
22.  \} 
23. 
24. /\*\*
25.  \* 初始化画笔
26.  \* 
27.  \* @param context
28.  \* Fuck
29.  \*/
30. **private****void** initPaint(Context context) \{ 
31. /\*
32.  \* 初始化描边画笔
33.  \*/
34.  strokePaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG); 
35.  strokePaint.setStyle(Paint.Style.STROKE); 
36.  strokePaint.setColor(Color.WHITE); 
37.  strokePaint.setStrokeCap(Paint.Cap.ROUND); 
38.  \} 
39. 
40. @Override
41. **protected****void** onMeasure(**int** widthMeasureSpec, **int** heightMeasureSpec) \{ 
42. // 强制长宽一致
43. **super**.onMeasure(widthMeasureSpec, widthMeasureSpec); 
44.  \} 
45. 
46. @Override
47. **protected****void** onSizeChanged(**int** w, **int** h, **int** oldw, **int** oldh) \{ 
48. // 获取控件边长
49.  size = w; 
50. 
51. // 参数计算
52.  calculation(); 
53.  \} 
54. 
55. /\*
56.  \* 参数计算
57.  \*/
58. **private****void** calculation() \{ 
59. // 计算描边宽度
60.  strokeWidth = STROKE\_WIDTH \* size; 
61. 
62. // 计算大圆半径
63.  largeCricleRadiu = size \* CRICLE\_LARGER\_RADIU; 
64. 
65. // 计算中心圆圆心坐标
66.  ccX = size / 2; 
67.  ccY = size / 2 \+ size \* CRICLE\_LARGER\_RADIU; 
68. 
69. // 设置参数
70.  setPara(); 
71.  \} 
72. 
73. /\*\*
74.  \* 设置参数
75.  \*/
76. **private****void** setPara() \{ 
77. // 设置描边宽度
78.  strokePaint.setStrokeWidth(strokeWidth); 
79.  \} 
80. 
81. @Override
82. **protected****void** onDraw(Canvas canvas) \{ 
83. // 绘制背景
84.  canvas.drawColor(0xFFF29B76); 
85. 
86. // 绘制中心圆
87.  canvas.drawCircle(ccX, ccY, largeCricleRadiu, strokePaint); 
88.  \} 
89. \}

大家可以看到我在View重写了这了一个方法：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  @Override
2.  **protected****void** onMeasure(**int** widthMeasureSpec, **int** heightMeasureSpec) \{ 
3.  // 强制长宽一致
4.  **super**.onMeasure(widthMeasureSpec, widthMeasureSpec); 
5.  \}

这个方法就是用来测量控件宽高的，而其从爹那获取的两个参数widthMeasureSpec和heightMeasureSpec分别封装了View的Size和Mode，我们会在1/2讲View的绘制流程，这里只需跟着我的脚步在这光滑的地板上摩擦摩擦即可 = = ！  
onSizeChanged这个方法我们前面也提过就不多扯了，效果如下：

![Center 44][]

然后下一步该如何做呢？画哪个呢？再从左上开始吧……，好我们计算坐标：

![Center 45][]

没错对吧，绿色的点就是我们要计算的坐标。但是这样去算太TM复杂了！毫无违和感！我们细心观察，左上边那一节不就是等同于：

![Center 46][]

这样的一个变换吗？之前我们曾多次使用到画布的图层，如果我们能这样画图形再以中心圆的圆心坐标为旋转点向右旋转画布岂不是可以很简单：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MultiCricleView **extends** View \{ 
2.  **private****static****final****float** STROKE\_WIDTH = 1F / 256F, // 描边宽度占比
3.   LINE\_LENGTH = 3F / 32F, // 线段长度占比
4.   CRICLE\_LARGER\_RADIU = 3F / 32F,// 大圆半径
5.   CRICLE\_SMALL\_RADIU = 5F / 64F,// 小圆半径
6.   ARC\_RADIU = 1F / 8F,// 弧半径
7.   ARC\_TEXT\_RADIU = 5F / 32F;// 弧围绕文字半径
8.  
9.  **private** Paint strokePaint;// 描边画笔
10. 
11. **private****int** size;// 控件边长
12. 
13. **private****float** strokeWidth;// 描边宽度
14. **private****float** ccX, ccY;// 中心圆圆心坐标
15. **private****float** largeCricleRadiu;// 大圆半径
16. **private****float** lineLength;// 线段长度
17. 
18. **public** MultiCricleView(Context context, AttributeSet attrs) \{ 
19. **super**(context, attrs); 
20. 
21. // 初始化画笔
22.  initPaint(context); 
23.  \} 
24. 
25. /\*\*
26.  \* 初始化画笔
27.  \* 
28.  \* @param context
29.  \* Fuck
30.  \*/
31. **private****void** initPaint(Context context) \{ 
32. /\*
33.  \* 初始化描边画笔
34.  \*/
35.  strokePaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG); 
36.  strokePaint.setStyle(Paint.Style.STROKE); 
37.  strokePaint.setColor(Color.WHITE); 
38.  strokePaint.setStrokeCap(Paint.Cap.ROUND); 
39.  \} 
40. 
41. @Override
42. **protected****void** onMeasure(**int** widthMeasureSpec, **int** heightMeasureSpec) \{ 
43. // 强制长宽一致
44. **super**.onMeasure(widthMeasureSpec, widthMeasureSpec); 
45.  \} 
46. 
47. @Override
48. **protected****void** onSizeChanged(**int** w, **int** h, **int** oldw, **int** oldh) \{ 
49. // 获取控件边长
50.  size = w; 
51. 
52. // 参数计算
53.  calculation(); 
54.  \} 
55. 
56. /\*
57.  \* 参数计算
58.  \*/
59. **private****void** calculation() \{ 
60. // 计算描边宽度
61.  strokeWidth = STROKE\_WIDTH \* size; 
62. 
63. // 计算大圆半径
64.  largeCricleRadiu = size \* CRICLE\_LARGER\_RADIU; 
65. 
66. // 计算线段长度
67.  lineLength = size \* LINE\_LENGTH; 
68. 
69. // 计算中心圆圆心坐标
70.  ccX = size / 2; 
71.  ccY = size / 2 \+ size \* CRICLE\_LARGER\_RADIU; 
72. 
73. // 设置参数
74.  setPara(); 
75.  \} 
76. 
77. /\*\*
78.  \* 设置参数
79.  \*/
80. **private****void** setPara() \{ 
81. // 设置描边宽度
82.  strokePaint.setStrokeWidth(strokeWidth); 
83.  \} 
84. 
85. @Override
86. **protected****void** onDraw(Canvas canvas) \{ 
87. // 绘制背景
88.  canvas.drawColor(0xFFF29B76); 
89. 
90. // 绘制中心圆
91.  canvas.drawCircle(ccX, ccY, largeCricleRadiu, strokePaint); 
92. 
93. // 绘制左上方图形
94.  drawTopLeft(canvas); 
95.  \} 
96. 
97. /\*\*
98.  \* 绘制左上方图形
99.  \* 
100.  \* @param canvas
101.  \*/
102. **private****void** drawTopLeft(Canvas canvas) \{ 
103. // 锁定画布
104.  canvas.save(); 
105. 
106. // 平移和旋转画布
107.  canvas.translate(ccX, ccY); 
108.  canvas.rotate(-30); 
109. 
110. // 依次画：线-圈-线-圈
111.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
112.  canvas.drawCircle(0, -lineLength \* 3, largeCricleRadiu, strokePaint); 
113.  canvas.drawLine(0, -largeCricleRadiu \* 4, 0, -lineLength \* 5, strokePaint); 
114.  canvas.drawCircle(0, -lineLength \* 6, largeCricleRadiu, strokePaint); 
115. 
116. // 释放画布
117.  canvas.restore(); 
118.  \} 
119. \}

like below：  
![Center 47][]

保存和释放画布就不说了，用过N次了。

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  canvas.translate(ccX, ccY);

我们将画布平移了ccx和xxy个单位其实就是让画布的左上端原点远我们的中心圆圆心重合：  
![Center 48][]

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  canvas.rotate(-30);

向左旋转画布30度：  
![Center 49][]

这里有一点非常非常地重要！画布的平移旋转同样也会影响画布的自身坐标！如上图，我们看到画布的坐标也跟着旋转了30度！我们正是利用了这一点巧妙地在画图而避免繁杂的坐标计算！！

同理我们可以绘制出其他三个小圆：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MultiCricleView **extends** View \{ 
2.  **private****static****final****float** STROKE\_WIDTH = 1F / 256F, // 描边宽度占比
3.   SPACE = 1F / 64F,// 大圆小圆线段两端间隔占比
4.   LINE\_LENGTH = 3F / 32F, // 线段长度占比
5.   CRICLE\_LARGER\_RADIU = 3F / 32F,// 大圆半径
6.   CRICLE\_SMALL\_RADIU = 5F / 64F,// 小圆半径
7.   ARC\_RADIU = 1F / 8F,// 弧半径
8.   ARC\_TEXT\_RADIU = 5F / 32F;// 弧围绕文字半径
9.  
10. **private** Paint strokePaint;// 描边画笔
11. 
12. **private****int** size;// 控件边长
13. 
14. **private****float** strokeWidth;// 描边宽度
15. **private****float** ccX, ccY;// 中心圆圆心坐标
16. **private****float** largeCricleRadiu, smallCricleRadiu;// 大圆半径和小圆半径
17. **private****float** lineLength;// 线段长度
18. **private****float** space;// 大圆小圆线段两端间隔
19. 
20. **private****enum** Type \{ 
21.  LARGER, SMALL 
22.  \} 
23. 
24. **public** MultiCricleView(Context context, AttributeSet attrs) \{ 
25. **super**(context, attrs); 
26. 
27. // 初始化画笔
28.  initPaint(context); 
29.  \} 
30. 
31. /\*\*
32.  \* 初始化画笔
33.  \* 
34.  \* @param context
35.  \* Fuck
36.  \*/
37. **private****void** initPaint(Context context) \{ 
38. /\*
39.  \* 初始化描边画笔
40.  \*/
41.  strokePaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG); 
42.  strokePaint.setStyle(Paint.Style.STROKE); 
43.  strokePaint.setColor(Color.WHITE); 
44.  strokePaint.setStrokeCap(Paint.Cap.ROUND); 
45.  \} 
46. 
47. @Override
48. **protected****void** onMeasure(**int** widthMeasureSpec, **int** heightMeasureSpec) \{ 
49. // 强制长宽一致
50. **super**.onMeasure(widthMeasureSpec, widthMeasureSpec); 
51.  \} 
52. 
53. @Override
54. **protected****void** onSizeChanged(**int** w, **int** h, **int** oldw, **int** oldh) \{ 
55. // 获取控件边长
56.  size = w; 
57. 
58. // 参数计算
59.  calculation(); 
60.  \} 
61. 
62. /\*
63.  \* 参数计算
64.  \*/
65. **private****void** calculation() \{ 
66. // 计算描边宽度
67.  strokeWidth = STROKE\_WIDTH \* size; 
68. 
69. // 计算大圆半径
70.  largeCricleRadiu = size \* CRICLE\_LARGER\_RADIU; 
71. 
72. // 计算小圆半径
73.  smallCricleRadiu = size \* CRICLE\_SMALL\_RADIU; 
74. 
75. // 计算线段长度
76.  lineLength = size \* LINE\_LENGTH; 
77. 
78. // 计算大圆小圆线段两端间隔
79.  space = size \* SPACE; 
80. 
81. // 计算中心圆圆心坐标
82.  ccX = size / 2; 
83.  ccY = size / 2 \+ size \* CRICLE\_LARGER\_RADIU; 
84. 
85. // 设置参数
86.  setPara(); 
87.  \} 
88. 
89. /\*\*
90.  \* 设置参数
91.  \*/
92. **private****void** setPara() \{ 
93. // 设置描边宽度
94.  strokePaint.setStrokeWidth(strokeWidth); 
95.  \} 
96. 
97. @Override
98. **protected****void** onDraw(Canvas canvas) \{ 
99. // 绘制背景
100.  canvas.drawColor(0xFFF29B76); 
101. 
102. // 绘制中心圆
103.  canvas.drawCircle(ccX, ccY, largeCricleRadiu, strokePaint); 
104. 
105. // 绘制左上方图形
106.  drawTopLeft(canvas); 
107. 
108. // 绘制右上方图形
109.  drawTopRight(canvas); 
110. 
111. // 绘制左下方图形
112.  drawBottomLeft(canvas); 
113. 
114. // 绘制下方图形
115.  drawBottom(canvas); 
116. 
117. // 绘制右下方图形
118.  drawBottomRight(canvas); 
119.  \} 
120. 
121. /\*\*
122.  \* 绘制左上方图形
123.  \* 
124.  \* @param canvas
125.  \*/
126. **private****void** drawTopLeft(Canvas canvas) \{ 
127. // 锁定画布
128.  canvas.save(); 
129. 
130. // 平移和旋转画布
131.  canvas.translate(ccX, ccY); 
132.  canvas.rotate(-30); 
133. 
134. // 依次画：线-圈-线-圈
135.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
136.  canvas.drawCircle(0, -lineLength \* 3, largeCricleRadiu, strokePaint); 
137.  canvas.drawLine(0, -largeCricleRadiu \* 4, 0, -lineLength \* 5, strokePaint); 
138.  canvas.drawCircle(0, -lineLength \* 6, largeCricleRadiu, strokePaint); 
139. 
140. // 释放画布
141.  canvas.restore(); 
142.  \} 
143. 
144. /\*\*
145.  \* 绘制右上方图形
146.  \* 
147.  \* @param canvas
148.  \*/
149. **private****void** drawTopRight(Canvas canvas) \{ 
150. // 锁定画布
151.  canvas.save(); 
152. 
153. // 平移和旋转画布
154.  canvas.translate(ccX, ccY); 
155.  canvas.rotate(30); 
156. 
157. // 依次画：线-圈
158.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
159.  canvas.drawCircle(0, -lineLength \* 3, largeCricleRadiu, strokePaint); 
160. 
161. // 释放画布
162.  canvas.restore(); 
163.  \} 
164. 
165. **private****void** drawBottomLeft(Canvas canvas) \{ 
166. // 锁定画布
167.  canvas.save(); 
168. 
169. // 平移和旋转画布
170.  canvas.translate(ccX, ccY); 
171.  canvas.rotate(-100); 
172. 
173. // 依次画：(间隔)线(间隔)-圈
174.  canvas.drawLine(0, -largeCricleRadiu - space, 0, -lineLength \* 2 \- space, strokePaint); 
175.  canvas.drawCircle(0, -lineLength \* 2 \- smallCricleRadiu - space \* 2, smallCricleRadiu, strokePaint); 
176. 
177. // 释放画布
178.  canvas.restore(); 
179.  \} 
180. 
181. **private****void** drawBottom(Canvas canvas) \{ 
182. // 锁定画布
183.  canvas.save(); 
184. 
185. // 平移和旋转画布
186.  canvas.translate(ccX, ccY); 
187.  canvas.rotate(180); 
188. 
189. // 依次画：(间隔)线(间隔)-圈
190.  canvas.drawLine(0, -largeCricleRadiu - space, 0, -lineLength \* 2 \- space, strokePaint); 
191.  canvas.drawCircle(0, -lineLength \* 2 \- smallCricleRadiu - space \* 2, smallCricleRadiu, strokePaint); 
192. 
193. // 释放画布
194.  canvas.restore(); 
195.  \} 
196. 
197. **private****void** drawBottomRight(Canvas canvas) \{ 
198. // 锁定画布
199.  canvas.save(); 
200. 
201. // 平移和旋转画布
202.  canvas.translate(ccX, ccY); 
203.  canvas.rotate(100); 
204. 
205. // 依次画：(间隔)线(间隔)-圈
206.  canvas.drawLine(0, -largeCricleRadiu - space, 0, -lineLength \* 2 \- space, strokePaint); 
207.  canvas.drawCircle(0, -lineLength \* 2 \- smallCricleRadiu - space \* 2, smallCricleRadiu, strokePaint); 
208. 
209. // 释放画布
210.  canvas.restore(); 
211.  \} 
212. \}

大家可以看到，每一次绘制我都锁定了画布并平移旋转以调整画布的原点坐标极大程度地方便我们计算。效果如下：

![Center 50][]

上面的代码会有巨量的重复代码，正如上面我说，这个图形我们是画死的，在没讲完View的测绘和ViewGroup之前我们不会做任何一个完整的控件，So~~~~同时也是为了方便大家容易理解这玩意是怎么画的，我也就不对重复的方法做进一步封装了，不过在做项目的时候切忌大量的重复代码。  
我们再给这些圈圈里加些文字，文字的中点很明显就是这些圈圈的圆心对吧，1/4中我说过如何把文字画到中心的？

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **public****class** MultiCricleView **extends** View \{ 
2.  **private****static****final****float** STROKE\_WIDTH = 1F / 256F, // 描边宽度占比
3.   SPACE = 1F / 64F,// 大圆小圆线段两端间隔占比
4.   LINE\_LENGTH = 3F / 32F, // 线段长度占比
5.   CRICLE\_LARGER\_RADIU = 3F / 32F,// 大圆半径
6.   CRICLE\_SMALL\_RADIU = 5F / 64F,// 小圆半径
7.   ARC\_RADIU = 1F / 8F,// 弧半径
8.   ARC\_TEXT\_RADIU = 5F / 32F;// 弧围绕文字半径
9.  
10. **private** Paint strokePaint, textPaint;// 描边画笔和文字画笔
11. 
12. **private****int** size;// 控件边长
13. 
14. **private****float** strokeWidth;// 描边宽度
15. **private****float** ccX, ccY;// 中心圆圆心坐标
16. **private****float** largeCricleRadiu, smallCricleRadiu;// 大圆半径和小圆半径
17. **private****float** lineLength;// 线段长度
18. **private****float** space;// 大圆小圆线段两端间隔
19. **private****float** textOffsetY;// 文本的Y轴偏移值
20. 
21. **public** MultiCricleView(Context context, AttributeSet attrs) \{ 
22. **super**(context, attrs); 
23. 
24. // 初始化画笔
25.  initPaint(context); 
26.  \} 
27. 
28. /\*\*
29.  \* 初始化画笔
30.  \* 
31.  \* @param context
32.  \* Fuck
33.  \*/
34. **private****void** initPaint(Context context) \{ 
35. /\*
36.  \* 初始化描边画笔
37.  \*/
38.  strokePaint = **new** Paint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG); 
39.  strokePaint.setStyle(Paint.Style.STROKE); 
40.  strokePaint.setColor(Color.WHITE); 
41.  strokePaint.setStrokeCap(Paint.Cap.ROUND); 
42. 
43. /\*
44.  \* 初始化文字画笔
45.  \*/
46.  textPaint = **new** TextPaint(Paint.ANTI\_ALIAS\_FLAG | Paint.DITHER\_FLAG | Paint.SUBPIXEL\_TEXT\_FLAG); 
47.  textPaint.setColor(Color.WHITE); 
48.  textPaint.setTextSize(30); 
49.  textPaint.setTextAlign(Paint.Align.CENTER); 
50. 
51.  textOffsetY = (textPaint.descent() + textPaint.ascent()) / 2; 
52.  \} 
53. 
54. @Override
55. **protected****void** onMeasure(**int** widthMeasureSpec, **int** heightMeasureSpec) \{ 
56. // 强制长宽一致
57. **super**.onMeasure(widthMeasureSpec, widthMeasureSpec); 
58.  \} 
59. 
60. @Override
61. **protected****void** onSizeChanged(**int** w, **int** h, **int** oldw, **int** oldh) \{ 
62. // 获取控件边长
63.  size = w; 
64. 
65. // 参数计算
66.  calculation(); 
67.  \} 
68. 
69. /\*
70.  \* 参数计算
71.  \*/
72. **private****void** calculation() \{ 
73. // 计算描边宽度
74.  strokeWidth = STROKE\_WIDTH \* size; 
75. 
76. // 计算大圆半径
77.  largeCricleRadiu = size \* CRICLE\_LARGER\_RADIU; 
78. 
79. // 计算小圆半径
80.  smallCricleRadiu = size \* CRICLE\_SMALL\_RADIU; 
81. 
82. // 计算线段长度
83.  lineLength = size \* LINE\_LENGTH; 
84. 
85. // 计算大圆小圆线段两端间隔
86.  space = size \* SPACE; 
87. 
88. // 计算中心圆圆心坐标
89.  ccX = size / 2; 
90.  ccY = size / 2 \+ size \* CRICLE\_LARGER\_RADIU; 
91. 
92. // 设置参数
93.  setPara(); 
94.  \} 
95. 
96. /\*\*
97.  \* 设置参数
98.  \*/
99. **private****void** setPara() \{ 
100. // 设置描边宽度
101.  strokePaint.setStrokeWidth(strokeWidth); 
102.  \} 
103. 
104. @Override
105. **protected****void** onDraw(Canvas canvas) \{ 
106. // 绘制背景
107.  canvas.drawColor(0xFFF29B76); 
108. 
109. // 绘制中心圆
110.  canvas.drawCircle(ccX, ccY, largeCricleRadiu, strokePaint); 
111.  canvas.drawText("AigeStudio", ccX, ccY - textOffsetY, textPaint); 
112. 
113. // 绘制左上方图形
114.  drawTopLeft(canvas); 
115. 
116. // 绘制右上方图形
117.  drawTopRight(canvas); 
118. 
119. // 绘制左下方图形
120.  drawBottomLeft(canvas); 
121. 
122. // 绘制下方图形
123.  drawBottom(canvas); 
124. 
125. // 绘制右下方图形
126.  drawBottomRight(canvas); 
127.  \} 
128. 
129. /\*\*
130.  \* 绘制左上方图形
131.  \* 
132.  \* @param canvas
133.  \*/
134. **private****void** drawTopLeft(Canvas canvas) \{ 
135. // 锁定画布
136.  canvas.save(); 
137. 
138. // 平移和旋转画布
139.  canvas.translate(ccX, ccY); 
140.  canvas.rotate(-30); 
141. 
142. // 依次画：线-圈-线-圈
143.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
144.  canvas.drawCircle(0, -lineLength \* 3, largeCricleRadiu, strokePaint); 
145.  canvas.drawText("Apple", 0, -lineLength \* 3 \- textOffsetY, textPaint); 
146. 
147.  canvas.drawLine(0, -largeCricleRadiu \* 4, 0, -lineLength \* 5, strokePaint); 
148.  canvas.drawCircle(0, -lineLength \* 6, largeCricleRadiu, strokePaint); 
149.  canvas.drawText("Orange", 0, -lineLength \* 6 \- textOffsetY, textPaint); 
150. 
151. // 释放画布
152.  canvas.restore(); 
153.  \} 
154. 
155. /\*\*
156.  \* 绘制右上方图形
157.  \* 
158.  \* @param canvas
159.  \*/
160. **private****void** drawTopRight(Canvas canvas) \{ 
161. **float** cricleY = -lineLength \* 3; 
162. 
163. // 锁定画布
164.  canvas.save(); 
165. 
166. // 平移和旋转画布
167.  canvas.translate(ccX, ccY); 
168.  canvas.rotate(30); 
169. 
170. // 依次画：线-圈
171.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
172.  canvas.drawCircle(0, cricleY, largeCricleRadiu, strokePaint); 
173.  canvas.drawText("Tropical", 0, cricleY - textOffsetY, textPaint); 
174. 
175. // 释放画布
176.  canvas.restore(); 
177.  \} 
178. 
179. **private****void** drawBottomLeft(Canvas canvas) \{ 
180. **float** lineYS = -largeCricleRadiu - space, lineYE = -lineLength \* 2 \- space, cricleY = -lineLength \* 2 \- smallCricleRadiu - space \* 2; 
181. 
182. // 锁定画布
183.  canvas.save(); 
184. 
185. // 平移和旋转画布
186.  canvas.translate(ccX, ccY); 
187.  canvas.rotate(-100); 
188. 
189. // 依次画：(间隔)线(间隔)-圈
190.  canvas.drawLine(0, lineYS, 0, lineYE, strokePaint); 
191.  canvas.drawCircle(0, cricleY, smallCricleRadiu, strokePaint); 
192.  canvas.drawText("Banana", 0, cricleY - textOffsetY, textPaint); 
193. 
194. // 释放画布
195.  canvas.restore(); 
196.  \} 
197. 
198. **private****void** drawBottom(Canvas canvas) \{ 
199. **float** lineYS = -largeCricleRadiu - space, lineYE = -lineLength \* 2 \- space, cricleY = -lineLength \* 2 \- smallCricleRadiu - space \* 2; 
200. 
201. // 锁定画布
202.  canvas.save(); 
203. 
204. // 平移和旋转画布
205.  canvas.translate(ccX, ccY); 
206.  canvas.rotate(180); 
207. 
208. // 依次画：(间隔)线(间隔)-圈
209.  canvas.drawLine(0, lineYS, 0, lineYE, strokePaint); 
210.  canvas.drawCircle(0, cricleY, smallCricleRadiu, strokePaint); 
211.  canvas.drawText("Cucumber", 0, cricleY - textOffsetY, textPaint); 
212. 
213. // 释放画布
214.  canvas.restore(); 
215.  \} 
216. 
217. **private****void** drawBottomRight(Canvas canvas) \{ 
218. **float** lineYS = -largeCricleRadiu - space, lineYE = -lineLength \* 2 \- space, cricleY = -lineLength \* 2 \- smallCricleRadiu - space \* 2; 
219. 
220. // 锁定画布
221.  canvas.save(); 
222. 
223. // 平移和旋转画布
224.  canvas.translate(ccX, ccY); 
225.  canvas.rotate(100); 
226. 
227. // 依次画：(间隔)线(间隔)-圈
228.  canvas.drawLine(0, lineYS, 0, lineYE, strokePaint); 
229.  canvas.drawCircle(0, cricleY, smallCricleRadiu, strokePaint); 
230.  canvas.drawText("Vibrators", 0, cricleY - textOffsetY, textPaint); 
231. 
232. // 释放画布
233.  canvas.restore(); 
234.  \} 
235. \}

That's so easy right?  
![Center 51][]

稍微有点难的是右上方的那个半回扇形，扇形的中心应该是与右上方的圆心重合的对吧，那我们在画右上方图形的时候一起画不就是了？

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  /\*\*
2.   \* 绘制右上方图形
3.   \* 
4.   \* @param canvas
5.   \*/
6.  **private****void** drawTopRight(Canvas canvas) \{ 
7.  **float** cricleY = -lineLength \* 3; 
8.  
9.  // 锁定画布
10.  canvas.save(); 
11. 
12. // 平移和旋转画布
13.  canvas.translate(ccX, ccY); 
14.  canvas.rotate(30); 
15. 
16. // 依次画：线-圈
17.  canvas.drawLine(0, -largeCricleRadiu, 0, -lineLength \* 2, strokePaint); 
18.  canvas.drawCircle(0, cricleY, largeCricleRadiu, strokePaint); 
19.  canvas.drawText("Tropical", 0, cricleY - textOffsetY, textPaint); 
20. 
21. // 画弧形
22.  drawTopRightArc(canvas, cricleY); 
23. 
24. // 释放画布
25.  canvas.restore(); 
26. \} 
27. 
28. /\*\*
29.  \* 绘制右上角画弧形
30.  \* 
31.  \* @param canvas
32.  \* @param cricleY
33.  \*/
34. **private****void** drawTopRightArc(Canvas canvas, **float** cricleY) \{ 
35.  canvas.save(); 
36. 
37.  canvas.translate(0, cricleY); 
38.  canvas.rotate(-30); 
39. 
40. **float** arcRadiu = size \* ARC\_RADIU; 
41. 
42.  RectF oval = **new** RectF(-arcRadiu, -arcRadiu, arcRadiu, arcRadiu); 
43. 
44.  arcPaint.setStyle(Paint.Style.FILL); 
45.  arcPaint.setColor(0x55EC6941); 
46.  canvas.drawArc(oval, -22.5F, -135, **true**, arcPaint); 
47. 
48.  arcPaint.setStyle(Paint.Style.STROKE); 
49.  arcPaint.setColor(Color.WHITE); 
50.  canvas.drawArc(oval, -22.5F, -135, **false**, arcPaint); 
51. 
52.  canvas.restore(); 
53. \}

代码逻辑不复杂，大家很容易能看懂……注释什么的我就不写了……扇形上的文本如果大家理解了画布的变换很容易实现，首先在上面我们绘制扇形的时候已经将画布原点与右上圆心重合了对吧，这时我们再把画布向左旋转 扇形弧度/2 个度数是不是就可以让画布的坐标与扇形的右边重合了呢？那第一个文字的坐标就是\[0,负的文字弧形半径\]，第二个文字坐标只需转画布过 扇形弧度/4 个弧度以此类推可以画出五个文字：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  /\*\*
2.   \* 绘制右上角画弧形
3.   \* 
4.   \* @param canvas
5.   \* @param cricleY
6.   \*/
7.  **private****void** drawTopRightArc(Canvas canvas, **float** cricleY) \{ 
8.   canvas.save(); 
9.  
10.  canvas.translate(0, cricleY); 
11.  canvas.rotate(-30); 
12. 
13. **float** arcRadiu = size \* ARC\_RADIU; 
14.  RectF oval = **new** RectF(-arcRadiu, -arcRadiu, arcRadiu, arcRadiu); 
15.  arcPaint.setStyle(Paint.Style.FILL); 
16.  arcPaint.setColor(0x55EC6941); 
17.  canvas.drawArc(oval, -22.5F, -135, **true**, arcPaint); 
18.  arcPaint.setStyle(Paint.Style.STROKE); 
19.  arcPaint.setColor(Color.WHITE); 
20.  canvas.drawArc(oval, -22.5F, -135, **false**, arcPaint); 
21. 
22. **float** arcTextRadiu = size \* ARC\_TEXT\_RADIU; 
23. 
24.  canvas.save(); 
25. // 把画布旋转到扇形左端的方向
26.  canvas.rotate(-135F / 2F); 
27. 
28. /\*
29.  \* 每隔33.75度角画一次文本
30.  \*/
31. **for** (**float** i = 0; i < 5 \* 33.75F; i += 33.75F) \{ 
32.  canvas.save(); 
33.  canvas.rotate(i); 
34. 
35.  canvas.drawText("Aige", 0, -arcTextRadiu, textPaint); 
36. 
37.  canvas.restore(); 
38.  \} 
39. 
40.  canvas.restore(); 
41. 
42.  canvas.restore(); 
43. \}

对吧？看看效果：  
![Center 52][] [点击打开链接][Link 1]

好了，正如我所说，这只是一个单纯地画，而且此类奇葩的玩意难以真正做成一个控件去复用除非真的是公事公办，但是，我们依然可以尝试把它做成一个独立的控件，这在我们学写了如何测绘View和ViewGroup之后对你来说一定是小case。

上面我们的最终效果有一点是不对的，大家发现文字TMD居然都旋转了 - - ，那有木有方法让文字保持水平呢？其实答案我已经告诉你。自己去发掘吧！

源码下载：[传送门][Link 1]

这几天龙体欠安啊、哎……更新进度会有打乱~~~敬请大家follow~

[view plain]: http://blog.csdn.net/aigestudio/article/details/41799811#
[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e269013dbdfb4c6f930140f11ec0e178.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6a6ae01cc2c54b10862c51a3716362fb.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3aab26c79e04433cb4994781d1d1a452.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3316684c0657488cbdec268618171659.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/50ddba8ce3ba476ea5c9c4d05daa12d4.png
[Center 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/64e2e9b2d5104fa29d731f3623abc1b8.png
[20150113163411109]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dea2f59f85704e9fb1091ecfa0e01ffd.png
[Center 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0552bdc7488b421b9aa8832e9cd4293c.png
[Center 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/43a440f4f7e940b88c95657a85e93987.png
[Center 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a2709a9da498489ebf19d94727b321cc.png
[Center 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fe99b1dc22564e199c01d1020ceaab6e.png
[Center 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7c8e4662404a47b4baa9827934c2570d.png
[Center 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cd38803cac3749f382087b52ce1754b5.png
[Center 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/04436af1d3d94aeea0f42bbb09d63e3d.png
[Center 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0af5d3df08144e58b4ab879bd7e7cac2.png
[Center 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/55211cc2f2f2414194557d8199be377c.png
[Center 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/32d52fd0890448d18927bdb198dd5cd0.png
[Center 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/308d5d70d79b462489c7c96befe43420.png
[Center 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/58ab20780d894e50ae1a008d8a81e182.png
[Center 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4836d376bce94a45ab48bb3d476a1692.png
[Center 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b14b1173621d4544beecdd01dd16a6c1.png
[Center 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/89d3d31296324ed6a2895a36d4470baa.png
[Center 21]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6ea758892c0343de8d5d27a08c8aacf6.png
[Center 22]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/533ef20013894675bfb416c3199a4fd4.png
[Center 23]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d86701ec819e42d3b3679d087c935724.png
[Center 24]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ee780ad8aff6451d812239c696582259.png
[Center 25]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dfa6baf9d642449d81bff5326fb1656c.png
[Center 26]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cde106730fd046dd8a14054ca7262a1f.png
[Center 27]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/bd482a60c74041e6a14d9522d27367ca.png
[Center 28]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d5e1e00f715f453594437a94661cb693.png
[Center 29]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8033d231b7c043bea350a89d54524e7e.png
[Center 30]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/63085f85301e498f8d93269f68dd4e9d.png
[Center 31]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f69a72b5cd8d4affb69ded6c784e15a0.png
[Center 32]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c123d28fc2b14e65b588a6cf5773a9c6.png
[Center 33]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6dfaed08d5a7487fa0662004c657a7e5.png
[Center 34]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7a3dee7b2cf3429fa439d2683cc4dde9.png
[Android]: http://lib.csdn.net/base/android
[Center 35]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1bdc4a3611f14551bb67c6cdca323998.png
[Center 36]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/39c89b6554ab486395e3e2949f50f375.png
[Center 37]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c7e71f60301d48e589c921642080bac1.png
[20150113163500765]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/94e7857060f14892a2ca62a3f00b2ad6.png
[Center 38]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/044ff92f63b8497db9f58645dd4c44a1.png
[Center 39]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f43b7e92921b4a9c9cd852e574629184.png
[Center 40]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6c469ec6a4714b809fbff22e8e2489cf.png
[Center 41]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cf359014b8ab467d94459298381c02ac.png
[Center 42]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e9a2d55057d04c8bbf3835e26679c7a0.png
[Center 43]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2f31f70f7d564655bce6aa4845666bc6.png
[Center 44]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/880089e77bc24457ba83b6509ec355a4.png
[Center 45]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6f4b544032574feebe6722b97f23ceb1.png
[Center 46]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6aef96ba8907410bb0012c0bf72071e2.png
[Center 47]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5789448aedfe48efb079a937541c9182.png
[Center 48]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/72021c63102f4d6885f63e7d83078bc0.png
[Center 49]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4db2a2754a354972a78baf1fb12f5e83.png
[Center 50]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c1a2c80e82ec4282974f058239963557.png
[Center 51]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3ba1c94ea9274a8ab66d33c7aa36784d.png
[Center 52]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/39f4fccb6eec4da8a04bb42dd55bb58c.png
[Link 1]: http://download.csdn.net/detail/onceing/9741659