android.graphics包中的一些类的使用

游戏编程相关参考 
Matrix学习系列： 
http://www.moandroid.com/?p=1781 
Android画图学习总结系列： 
http://www.moandroid.com/?p=764 
游戏开发系列（opengl es基础知识）： 
http://www.moandroid.com/?p=1730 
线性代数（包含矩阵的相关知识）： 
http://dl.iteye.com/topics/download/b56a388a-3408-3179-972b-3a72bdbaaa28 
俄罗斯方块的实现(c# silverlignth实现)： 
http://www.cnblogs.com/crazy-dave/archive/2011/05/20/Silverlight_Tetris1.html 
SurfaceView使用的参考： 
http://kb.cnblogs.com/page/80095/ 
http://blog.csdn.net/hellogv/article/details/5986835 
http://www.cnblogs.com/xuling/archive/2011/06/06/android.html

2d游戏编程学习 
从俄罗斯方块开始： 

还待完善的地方： 
1. 仅在320x480的屏幕上画面正常，还没有去兼容多屏幕 
2. 使用View进行绘制了，应该使用SurfaceView来绘制 
3. 功能还比较简陋，仅实现了主要内容 
4. 移动时会出现跳帧现象，主要是重绘是由view自己执行的，而没有在onKey中移动了就重绘，这样就可能导致移了两下而只绘了一次，就出现跳帧了 
... 
源码（俄罗斯方块的代码在game.tetris包下，其它包的内容都是学习的测试代码）：http://dl.iteye.com/topics/download/4f8ef46f-e5fb-3724-9561-480179a8651c

Region：表示一块区域 
和Rect不同的是，它表示的是一个不规则的样子，可以是椭圆、多边形等等，而Rect仅仅是矩形。

1. Region region = new Region();
2. region.isEmpty();
3. // width: 100, height: 50的矩形
4. region.set(100, 100, 200, 150);
5. Rect bounds = region.getBounds();
6. // 矩形区域是否在其内部
7. boolean contains = region.quickContains(120, 120, 170, 150);
8. // 矩形区域是否不在其内部
9. boolean reject = region.quickReject(0, 0, 50, 50);
10. // INTERSECT 取两者交集
11. Region r2 = new Region(region);
12. r2.op(0, 0, 150, 120, Region.Op.INTERSECT);
13. // DIFFERENCE 第一次不同于第二次的部分显示出来
14. r2 = new Region(region);
15. r2.op(0, 0, 150, 120, Region.Op.DIFFERENCE);
16. // REPLACE 显示第二次的
17. r2 = new Region(region);
18. r2.op(0, 0, 150, 120, Region.Op.REPLACE);
19. // REVERSE_DIFFERENCE 第二次不同于第一次的部分显示
20. r2 = new Region(region);
21. r2.op(0, 0, 150, 120, Region.Op.REVERSE_DIFFERENCE);
22. // UNION 取全集
23. r2 = new Region(region);
24. r2.op(0, 0, 150, 120, Region.Op.UNION);
25. // XOR 补集，就是全集的减去交集的剩余部分显示
26. r2 = new Region(region);
27. r2.op(0, 0, 150, 120, Region.Op.XOR);

示意图 

Path 
path可以看作是一个点集，将它内部的点集按顺序连接起来时可以组成任意边型。一般多边形就是用Path来画。

1. // 公共代码
2. Path pathToDraw = new Path();
3. // 移到某点处作为起点
4. pathToDraw.moveTo(50, 50);
5. pathToDraw.lineTo(100, 50);
6. pathToDraw.lineTo(150, 100);
7. pathToDraw.lineTo(50, 100);
8. // 多边形
9. pathToDraw.lineTo(100, 75);
10. pathToDraw.close();
11. // 不闭合，逆时针
12. pathToDraw.addCircle(50, 100, 30, Path.Direction.CCW);
13. // 不闭合，顺时针
14. pathToDraw.addCircle(50, 100, 30, Path.Direction.CW);
15. // 闭合，逆时针
16. pathToDraw.addCircle(50, 100, 30, Path.Direction.CCW);
17. pathToDraw.close();
18. // 闭合，逆时针
19. pathToDraw.addCircle(50, 100, 30, Path.Direction.CW);
20. pathToDraw.close();
21. // 上面四个画出来是一样的
22. // 添加弧线，弧线是由矩形来控制的，正方形时是圆弧，矩形时就是椭圆弧了
23. pathToDraw.addArc(new RectF(25, 75, 55, 155), 0, 270);
24. // 在最后一个点处添加弧线，如果rectf中指定的点与最后一个点不同，则首先会将其先lineTo最后一个点（图中可以看到，与上面的代码所画的图的区别就是多了个连接线段）
25. pathToDraw.arcTo(new RectF(25, 75, 55, 155), 0, 270);
26. // 添加二次曲线，两个控制点(25, 125), (75, 175)
27. pathToDraw.cubicTo(25, 125, 75, 175, 30, 200);
28. // 添加三次曲线，三个控制点(25, 125), (75, 175), (30, 200)
29. pathToDraw.cubicTo(25, 125, 75, 175, 30, 200);

Path.FillType路劲的填充类型还不是很理解，主要是文档没有对其做任何解释，api demo只有代码，也不懂啥意思。网上找了也没有解释的很清楚的。可以看下这个连接：http://www.imobilebbs.com/wordpress/?p=1589 

Bitmap 
Bitmap的density参数的使用

1. // 将完整的图片绘制到(0, 0)处
2. canvas.drawBitmap(mBmp, 0, 0, null);
3. // 240(hdpi)的图片放到160上时，就会变小1.5倍
4. mBmp.setDensity(240);
5. // 将完整的图片绘制到(100, 0)处
6. canvas.drawBitmap(mBmp, 100, 0, null);
7. // 将完整的源图片绘制到起点为(0, 100)，宽100、高100的矩形范围内
8. canvas.drawBitmap(mBmp, null, new Rect(0, 100, 100, 200), null);
9. // 将源图片的(0, 0)开始宽100、高100部分绘制到起点为(100, 100)宽100, 高50的矩形范围内
10. canvas.drawBitmap(mBmp, new Rect(0, 0, 100, 50), new Rect(100, 100, 200, 150), null);
11. // 将源图片的(0, 0)开始宽100、高100部分绘制到起点为(200, 100)宽50, 25的矩形范围内
12. canvas.drawBitmap(mBmp, new Rect(0, 0, 100, 50), new Rect(200, 100, 250, 125), null);

效果： 
 
最终得出的结论：bitmap.setDensity并不影响源图片，只是在绘制的时候，canvas会根据该density对图片进行缩放绘制。

Paint介绍 
Paint即画笔，在绘图过程中起到了极其重要的作用，画笔主要保存了颜色， 
样式等绘制信息，指定了如何绘制文本和图形，画笔对象有很多设置方法， 
大体上可以分为两类，一类与图形绘制相关，一类与文本绘制相关。

1. 1.图形绘制
2. setARGB(int a,int r,int g,int b);
3. 设置绘制的颜色，a代表透明度，r，g，b代表颜色值。
4. setAlpha(int a);
5. 设置绘制图形的透明度。
6. setColor(int color);
7. 设置绘制的颜色，使用颜色值来表示，该颜色值包括透明度和RGB颜色。
8. setAntiAlias(boolean aa);
9. 设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢。
10. setDither(boolean dither);
11. 设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
12. setFilterBitmap(boolean filter);
13. 如果该项设置为true，则图像在动画进行中会滤掉对Bitmap图像的优化操作，加快显示
14. 速度，本设置项依赖于dither和xfermode的设置
15. setMaskFilter(MaskFilter maskfilter);
16. 设置MaskFilter，可以用不同的MaskFilter实现滤镜的效果，如滤化，立体等
17. setColorFilter(ColorFilter colorfilter);
18. 设置颜色过滤器，可以在绘制颜色时实现不用颜色的变换效果
19. setPathEffect(PathEffect effect);
20. 设置绘制路径的效果，如点画线等
21. setShader(Shader shader);
22. 设置图像效果，使用Shader可以绘制出各种渐变效果
23. setShadowLayer(float radius ,float dx,float dy,int color);
24. 在图形下面设置阴影层，产生阴影效果，radius为阴影的角度，dx和dy为阴影在x轴和y轴上的距离，color为阴影的颜色
25. setStyle(Paint.Style style);
26. 设置画笔的样式，为FILL，FILL_OR_STROKE，或STROKE
27. setStrokeCap(Paint.Cap cap);
28. 当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式，如圆形样式
29. Cap.ROUND,或方形样式Cap.SQUARE
30. setSrokeJoin(Paint.Join join);
31. 设置绘制时各图形的结合方式，如平滑效果等
32. setStrokeWidth(float width);
33. 当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的粗细度
34. setXfermode(Xfermode xfermode);
35. 设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果
36. 2.文本绘制
37. setFakeBoldText(boolean fakeBoldText);
38. 模拟实现粗体文字，设置在小字体上效果会非常差
39. setSubpixelText(boolean subpixelText);
40. 设置该项为true，将有助于文本在LCD屏幕上的显示效果
41. setTextAlign(Paint.Align align);
42. 设置绘制文字的对齐方向
43. setTextScaleX(float scaleX);
44. 设置绘制文字x轴的缩放比例，可以实现文字的拉伸的效果
45. setTextSize(float textSize);
46. 设置绘制文字的字号大小
47. setTextSkewX(float skewX);
48. 设置斜体文字，skewX为倾斜弧度
49. setTypeface(Typeface typeface);
50. 设置Typeface对象，即字体风格，包括粗体，斜体以及衬线体，非衬线体等
51. setUnderlineText(boolean underlineText);
52. 设置带有下划线的文字效果
53. setStrikeThruText(boolean strikeThruText);
54. 设置带有删除线的效果

Paint类涉及的几个枚举：（从msdn抄过来的，msdn的文档果然比android文档详细n倍：http://msdn.microsoft.com/en-us/library/cc294944.aspx） 
Paint.Cap 如何结束笔触的枚举 

Paint.Join path的拐角处如何绘制 

Canvas的基本使用 
抗锯齿相关参考：http://www.iteye.com/topic/794505 
填充颜色，一般清屏时会用这里的方法

1. switch (keyUpCount) {
2. case 0:
3. canvas.drawARGB(100, 255, 0, 0);
4. break;
5. case 1:
6. canvas.drawColor(Color.argb(100, 0, 255, 0));
7. break;
8. case 2:
9. // 指定PorterDuff mode方式绘制颜色
10. canvas.drawColor(Color.argb(100, 0, 0, 255), Mode.SRC);
11. break;
12. case 3:
13. // paint方式的绘制颜色
14. Paint paint = new Paint();
15. paint.setARGB(100, 0xEE, 0xEE, 0xEE);
16. canvas.drawPaint(paint);
17. break;
18. }

绘制Bitmap

1. switch (keyUpCount) {
2. case 0: // 在(x, y)除绘制bitmap
3. canvas.drawBitmap(chameleonBmp, 20, 20, null);
4. break;
5. case 1: // 利用变换矩阵绘制bimap
6. Matrix matrix = new Matrix();
7. matrix.setRotate(10);
8. matrix.preTranslate(50, 50);
9. canvas.drawBitmap(chameleonBmp, matrix, null);
10. break;
11. case 2:
12. // 将图片的(0, 0, 100, 184)区域拉伸或缩放到canvas的
13. // (50, 50, 250, 418)区域进行绘制
14. Rect src = new Rect();
15. src.set(0, 0, 100, 184);
16. Rect dst = new Rect();
17. dst.set(50, 50, 250, 418);
18. canvas.drawBitmap(chameleonBmp, src, dst, null);
19. // canvas.drawBitmap(Bitmap, Rect, RectF, Paint); 与上面类似
20. // 就是RectF是Rect的float版本
21. break;
22. case 3:
23. // 自己构建bitmap的每个像素点，并将其绘制到canvas上
24. // 也就是说200x200的bitmap，需要自己构建40000个像素点
25. int[] bmpPixels = new int[] {
26. Color.RED, Color.RED, Color.RED, Color.RED, Color.RED,
27. Color.RED, Color.RED, Color.RED, Color.RED, Color.RED,
28. Color.RED, Color.RED, Color.RED, Color.RED, Color.RED,
29. Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN,
30. Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN,
31. Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN,
32. Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE,
33. Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE,
34. Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE
35. };
36. canvas.drawBitmap(bmpPixels, 0, 15, 20, 20, 15, 3, false, null);
37. break;
38. }

绘制基本的几何图形（绘制几何图形时，必须使用画笔paint）

1. Paint paint = new Paint();
2. paint.setColor(Color.RED); // 画笔颜色
3. paint.setAntiAlias(true); // 反锯齿
4. paint.setStyle(Paint.Style.STROKE); // 笔触绘制
5. paint.setStrokeWidth(3); // 笔触宽度
6. switch (keyUpCount) {
7. case 0: // 点
8. for (int i = 1; i <= 10; i++) {
9. canvas.drawPoint(i * 10, 20, paint);
10. }
11. break;
12. case 1: // 直线
13. for (int i = 1; i < 10; i++) {
14. canvas.drawLine(10, i * 10, 200, i * 10, paint);
15. }
16. break;
17. case 2: // 圆
18. canvas.drawCircle(100, 100, 90, paint);
19. break;
20. case 3: // 弧线和矩形
21. RectF outRect = new RectF(10, 10, 110, 110);
22. canvas.drawRect(outRect, paint);
23. float startAngle = 70;
24. float sweepAngle = 180;
25. canvas.drawArc(outRect, startAngle, sweepAngle, false, paint);
26. break;
27. case 4: // 椭圆
28. canvas.drawOval(new RectF(10, 10, 110, 60), paint);
29. break;
30. case 5: // 路径(任意边型)
31. Path path = new Path();
32. path.moveTo(10, 10);
33. path.lineTo(200, 10);
34. path.lineTo(140, 60);
35. path.lineTo(120, 30);
36. canvas.drawPath(path, paint);
37. break;
38. case 6: // 圆角矩形
39. RectF rect = new RectF(10, 10, 100, 100);
40. canvas.drawRoundRect(rect, 20, 40, paint);
41. break;
42. }

canvas的一些效果 
翻转效果，这样在使用图片时，左和右的图片就可以重用了。

1. Bitmap bmp = BitmapFactory.decodeResource(res, R.drawable.image830);
2. canvas.drawColor(Color.WHITE);
3. canvas.drawBitmap(bmp, 100, 160, null);
4. // 水平翻转
5. canvas.save();
6. canvas.scale(-1, 1, 240, 160);
7. canvas.drawBitmap(bmp, 240, 160, null);
8. canvas.restore();
9. // 垂直翻转
10. canvas.save();
11. canvas.scale(1, -1, 300, 160);
12. canvas.drawBitmap(bmp, 300, 160, null);
13. canvas.restore();

绘制文本 
Paint.Align 文本如何对其(x, y)绘制 
 
第一个是(x, y)位于文本左侧；第二个是(x, y)位于文本中间的；第三个是(x, y)位于文本的右侧。但他们都是canvas.drawText("...", x, y, paint); 仅仅是paint设置的不同了哦。

Paint.FontMetrics：字体元数据 
下图是对该部分涉及的排版术语的图形描述： 
 
Paint.FontMetrics.top：某种字体中，基线以上的最大距离（就是ascent的最大值） 
Paint.FontMetrics.bottom：某种字体中，基线以下的最大距离（就是descent的最小值）

1. Paint paint = new Paint();
2. paint.setColor(Color.RED); // 画笔颜色
3. paint.setAntiAlias(true); // 抗锯齿
4. paint.setStyle(Style.STROKE); // 笔触绘制
5. paint.setTextSize(30); // 字体大小
6. switch (keyUpCount) {
7. case 0: // 下划线文本
8. Paint paint0 = new Paint(paint);
9. paint0.setUnderlineText(true);
10. canvas.drawText("underline text", 10, 50, paint0);
11. break;
12. case 1: // x方向倾斜文本
13. Paint paint1 = new Paint(paint);
14. paint1.setTextSkewX(-0.3F);
15. char[] chars = "text skew x".toCharArray();
16. canvas.drawText(chars, 0, chars.length, 10, 50, paint1);
17. break;
18. case 2: // 缩放文本
19. Paint paint2 = new Paint(paint);
20. paint2.setTextScaleX(3.0F);
21. paint2.setTextSize(15);
22. canvas.drawText("text scale x", 0, 12, 10, 50, paint2);
23. break;
24. case 3: // 使用自定义字体的文本
25. Paint paint3 = new Paint(paint);
26. paint3.setTextSize(45);
27. paint3.setColor(Color.BLUE);
28. Typeface shift = Typeface.createFromAsset(getAssets(), "fonts/Shift.ttf");
29. paint3.setTypeface(shift);
30. canvas.drawText("Shift.ttf", 0, 9, 10, 50, paint3);
31. /* font attributes
32. Paint.FontMetrics fontMetrics = paint3.getFontMetrics();
33. fontMetrics.ascent;
34. paint3.ascent();
35. fontMetrics.descent;
36. paint3.descent();
37. fontMetrics.leading;
38. fontMetrics.top;
39. fontMetrics.bottom;
40. */
41. break;
42. case 4: // 路径文本
43. String text = "abcdefghijklmnOPQRST12345";
44. Paint paint4 = new Paint();
45. paint4.setColor(Color.BLUE);
46. paint4.setStyle(Style.STROKE);
47. // draw path
48. Path path = new Path();
49. path.moveTo(10, 100);
50. path.cubicTo(110, 200, 210, 0, 310, 100);
51. canvas.drawPath(path, paint4);
52. // draw text
53. paint.setTextSize(20);
54. canvas.drawTextOnPath(text, path, 20.0F, 5.0F, paint);
55. break;

canvas变换，save, restore, layer的使用 
layer其实就相当于photoshop中图层的概念，对当前图层的操作是不影响其它图层的。

1. Paint paint = new Paint();
2. paint.setColor(Color.RED);
3. paint.setAntiAlias(true);
4. paint.setStyle(Paint.Style.STROKE);
5. paint.setStrokeWidth(3);
6. switch (keyUpCount) {
7. case 0: // rotate旋转
8. canvas.rotate(20);
9. canvas.drawRect(10, 10, 300, 210, paint);
10. break;
11. case 1: // translate移动
12. canvas.translate(100, 0);
13. canvas.drawRect(10, 10, 300, 210, paint);
14. break;
15. case 2: // skew倾斜
16. canvas.skew(0.2F, 0);
17. canvas.drawRect(10, 10, 300, 210, paint);
18. break;
19. case 3: // 缩放
20. canvas.scale(0.5F, 1);
21. canvas.drawRect(10, 10, 300, 210, paint);
22. break;
23. case 4: // 没用save, restore
24. canvas.rotate(20);
25. canvas.drawRect(10, 10, 60, 60, paint);
26. canvas.translate(50, 0);
27. canvas.drawRect(10, 10, 70, 70, paint);
28. break;
29. case 5: // 用了save, restore
30. int saveCount = canvas.save();
31. // 将画布旋转20度，然后后面的绘制也都是旋转20度的
32. canvas.rotate(20);
33. canvas.drawRect(10, 10, 60, 60, paint);
34. // 将canvas还原到没rotate前
35. canvas.restoreToCount(saveCount);
36. canvas.translate(50, 0);
37. canvas.drawRect(10, 10, 70, 70, paint);
38. break;
39. case 6: // 没使用图层
40. paint.setStyle(Paint.Style.FILL);
41. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
42. canvas.drawRect(0, 0, 100, 100, paint);
43. canvas.drawRect(100, 100, 200, 200, paint);
44. paint.setColor(Color.BLUE);
45. canvas.drawRect(50, 50, 150, 150, paint);
46. break;
47. case 7: // 使用了图层layer
48. paint.setStyle(Paint.Style.FILL);
49. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
50. canvas.drawRect(0, 0, 100, 100, paint);
51. // 创建一个图层
52. int layerSC = canvas.saveLayer(null, null,
53. Canvas.MATRIX_SAVE_FLAG | // 合并图层时，restore应用于图层的变换
54. Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
55. Canvas.FULL_COLOR_LAYER_SAVE_FLAG);
56. canvas.translate(100, 100);
57. canvas.drawRect(0, 0, 100, 100, paint);
58. paint.setColor(Color.BLUE);
59. canvas.translate(-50, -50);
60. canvas.drawRect(0, 0, 100, 100, paint);
61. canvas.restoreToCount(layerSC); // 合并图层
62. break;

• 线性代数清华第二版.pdf (4.2 MB)
• 下载次数: 65

• demo_game.rar (397.6 KB)
• 下载次数: 100