2D图形开发（一）(高级).pdf

《2D图形开发（一）(高级).pdf》由会员分享，可在线阅读，更多相关《2D图形开发（一）(高级).pdf（28页珍藏版）》请在三一文库上搜索。

1、2D2D图形开发（一）图形开发（一） Android平台手机应用开发技术培训 高级.第15讲 学习目标： 目标学员： 课程时长：45分钟 有JAVA语言基础的开发者或在校计 算机相关专业大学生 学习和了解Android的2D图形框架。 掌握基本的绘图方法及其相关类的使用。 课程计划课程计划 2D图形框架介绍 android.graphics介绍 绘制自定义UI控件 课程目录课程目录 项目演练 课程计划 关于2D图形开发的课程将分为四个课时。 前两个课时主要讲解2D图形框架的基础知识，将包括2D图形引擎，自定义 View，图形的绘制，图片的处理等等内容。同时还会讲解一些基础演练，帮 组大家快速掌

2、握这部分内容。 后两个课时将在前面课程的基础上，以一个小游戏作为主题，综合讲解一些 2D图形开发方面的技巧。例如：简单的游戏框架，动画的制作，精灵的使用 等等。 课程计划 2D2D图形框架介绍图形框架介绍 android.graphics介绍 绘制自定义UI控件 课程目录课程目录 项目演练 Android的2D图形引擎skia介绍 Android的画图分为2D和3D两种： 3D部分是由OpenGL|ES实现的 2D是由skia来实现的，也就是Android框架图上的SGL（SGL在某些情 况下也会调用部分OpenGL|ES的内容来实现简单的3D效果） Android在应用层对SGL进行了Jav

3、a封装。因此不需要学习SGL或skia，只要 懂得使用Java操作View System以及绘图接口就可以了。 Android的2D图形引擎skia介绍 skia提供了底层绘图的四大要素： 位图（Bitmap） 代表像素图形。支持png，jpg，bmp等常用图片格式。 图元（drawing primitive） 被绘画的图形单元。可以是位图，图形，线条，文字等。 画布（Canvas） 用于呈现被绘制的内容（图元）。 提供了大量的绘制方法，例如画线，画文字，画位图等等。 画笔（Paint） 用于描述绘画的样式，色彩等信息。 可以在android.graphics包中找到四大要素对应的实现类。分别

4、是Bitmap， Canvas，Paint类。图元作为一个抽象概念，没有具体的实现类。只要是可以 被Canvas呈现的对象，都可以认为是图元。 课程计划 2D图形框架介绍 android.graphicsandroid.graphics介绍介绍 绘制自定义UI控件 课程目录课程目录 项目演练 Bitmap类介绍 android.graphics包提供了底层绘图的基本功能和类库，它让我们可以在屏幕 上直接进行绘图（它是对skia框架的Java包装，同时还增加了一些工具类）。 下面将对其关键成员一一进行介绍。 首先要介绍Bitmap，位图类。它可以作为图元被呈现到画布（Canvas）。同 时它提供

5、了非常丰富的方法，方便我们对位图进行操作。 首先，Bitmap自身提供了很多静态方法用于创建其实例。 createBitmap(Bitmap src) 用一个Bitmap对象创建出一个新实例 createBitmap(Bitmap src, int x, int y, int w, int h) 用一个Bitmap的指定区域创建一个新实例 createBitmap(Bitmap src, int x, int y, int w, int h, Matrix m, boolean filter) 用一个Bitmap的制定区域以及一个变形矩阵创建一个新实例 Bitmap类介绍 createScal

6、edBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter) 用一个Bitmap对象创建经过缩放后的位图对象 createBitmap(int colors, int w, int h, Bitmap.Config c) 使用像素点的色彩信息直接创建一个位图 createBitmap(int width, int height, Bitmap.Config config) 创建一个指定高度和宽度的空位图对象 除了上面这些构造方法，我们一般使用BitmapFactory直接从资源，文件，流， byte数组等方式创建出位图对象。

7、例如： decodeByteArray(byte data, int offset, int length) 从byte数组创建Bitmap对象（byte应该是图片文件的内容） decodeFile(String pathName) 从图片文件创建Bitmap对象 以及decodeResource和decodeStream，分别代表从资源和流创建位图。 Bitmap类介绍 最后介绍一下Bitmap类最有用的方法（其它方法请参考文档） getPixel(int x, int y) 获取某像素点的颜色值（整型，ARGB） getPixels(int pixels, int offset, int

8、stride, int x, int y, int width, int height) 获取某片区域的像素点的颜色值数组（整型数组，ARGB） setPixel(int x, int y, int color) 设置位图中某一点像素的颜色（可用于动态修改图像） setPixels(int pixels, int offset, int stride, int x, int y, int width, int height) 设置位图中某片区域的像素的颜色（可用于动态修改图像） compress(Bitmap.CompressFormat cf, int quality, OutputStre

9、am os) 将位图输出为压缩格式（jpeg或者png等格式，可用于保存当前图像） Paint类介绍 Paint可以理解为画笔、画刷的属性定义类。主要用于描述绘画操作的颜色， 样式，字体，文字大小等属性。 Paint的功能非常繁多，下面例举其最常用的部分（其它的请参考文档）： setAntiAlias 全拼抗锯齿（务必打开这个功能）。 setTypeface 设置字体。 setTextSize 设置文字大小。 setTextAlign 设置文字对齐。 setStyle 设置风格，例如填充，凹陷等。 breakText 文本断行，配合此方法可以避免画文字时“出界”。 measureText 获取

10、文本显示时的宽度。 Canvas类介绍 Canvas类代表可供绘画的表面（绘图表面， 屏幕，Bitmap等），它提供各 种图元（drawing primitive）的绘画方法。 程序员可以使用这些绘画方法，将图元绘制到Canvas所代表的绘图表面。 通常有两种绘图表面。一种是使用Canvas向一个Bitmap对象进行绘图。 另一种是向屏幕绘图，此时对Canvas的操作，将直接反映到屏幕上。 使用如下两个方法，都可以获取一个用于Bitmap对象的Canvas实例 此外，Android的UI也是基于这个绘图框架实现的。所以View类的关键方法 onDraw(Canvas canvas)中，包含了代

11、表该View控件的绘图表面（Canvas）。 可以重写onDraw方法来改变View的绘画效果。 Canvas canvas = new Canvas(bitmap); Canvas canvas = new Canvas(); canvas.setBitmap(bitmap); Canvas类介绍 Canvas的绘画方法： drawArc，画弧形或扇面 drawBitmap，画位图 drawCircle，画圆 drawOval，画椭圆 drawLine，画直线 drawLines，画线段数组 drawPath，画轨迹 drawPicture，画图像 drawPoint，画点 drawPoin

12、ts，画点数组 drawRect，画矩形 drawRoundRect，画圆角矩形 drawText，画文本 drawVertices，画顶点数组 drawTextOnPath，按一定的轨迹画文本（例如按波浪形排列文字） drawRGB，drawARGB，drawColor，用颜色填充Canvas （绘图表面） drawBitmapMesh，通过变换矩阵对图片进行变换后将其再绘制到Canvas drawPaint，使用当前画笔（Paint）的颜色和风格填充Canvas drawPosText，按指定的位置数组，画文本 Canvas类介绍 2D绘图框架提供一种裁剪区（clip）的 操作，用来控制当

13、前绘图所影响的区域， 绘图操作将无法影响区域之外的部分。 clipPath，按照特定的轨迹裁剪Canvas clipRect，矩形裁剪 clipRegion，区域裁剪 右图展示了Region类的特性： Union表示并操作 Difference表示非操作 Xor表示异或操作 Intersect表示与操作 课程计划 2D图形框架介绍 android.graphics介绍 绘制自定义绘制自定义UIUI控件控件 课程目录课程目录 项目演练 自定义UI控件简介 Android允许开发者通过以下步骤创建自定义的UI控件： 首先需要创建一个View的子类（View是所有UI控件的基类）。 然后重载onDr

14、aw(Canvas canvas)函数，它将决定UI控件如何被显示。使用 时在onDraw方法中利用canvas进行绘画即可。 最后可以选择性的重载View的其它函数，完成控件的交互功能。 private class MyView extends View public MyView(Context context) super(context); setFocusable(true); protected void onDraw(Canvas canvas) super.onDraw(canvas); 课程计划 2D图形框架介绍 android.graphics介绍 绘制自定义UI控件 课程

15、目录课程目录 项目演练项目演练 基本绘图演练 本次演练，将使用刚才介绍的知识，完成一些绘图的基本的练习，同时利用 实际的编码，向大家进一步讲解绘图操作的一些细节。 首先需要创建练习的环境，创建Android2D项目，并实现Android2DActivity （演练主界面）以及 TestShapeActivity（基本图形测试界面）。 然后在TestShapeActivity中，实现一个自定义UI控件MyView。 private class MyView extends View public MyView(Context context) super(context); setFocusab

16、le(true); protected void onDraw(Canvas canvas) super.onDraw(canvas); 基本绘图演练 在onDraw方法中，实现绘图方法。下面例举几个重要的代码片段： 抗锯齿，能提高控件显示效果 RectF，矩形实体类，包含四个顶点。很对绘图方法都用它做参数。 Path，轨迹。非常有用的顶点集合类。下面定义了一个三角形。此外，它常 用于定义轨迹的顶点集合信息（例如手指在屏幕上滑动的轨迹）。 paint.setAntiAlias(true); RectF re = new RectF(10, 220, 70, 250); Path path =

17、new Path(); path.moveTo(10, 330); path.lineTo(70, 330); path.lineTo(40, 270); path.close(); 基本绘图演练 设置Paint的Style，此处是设置为填充风格，这样画出来的封闭图形都会被当 前Paint的颜色填充， Paint.Style.STROKE代表空心。 设置Paint的着色，这里使用了渐变材质（ Shader，称作渲染或着色） 。这 个术语一般用于3D贴图。但这里我们可以理解为使用某种材质去进行绘画。 Android中，Shader有BitmapShader（位图材质）, ComposeShade

18、r（构成 材质）, LinearGradient（线性渐变）, RadialGradient（放射渐 变）, SweepGradient（曲线渐变）等几种类型。 paint.setStyle(Paint.Style.FILL); Shader mShader = new LinearGradient(0, 0, 100, 100, new int Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW , null,Shader.TileMode.REPEAT); paint.setShader(mShader); 裁剪演练 接下来，我们进行裁剪方面的

19、演练。首先参照基本绘图的演练实现 TestClipActivity类。然后实现一个绘画场景的基本方法。 其中画了一个白色矩形，一条红色的线，一个绿色的圆，以及蓝色的文字。 我们将在随后的代码中，查看clip对这个场景的影响。 private void drawScene(Canvas canvas) canvas.clipRect(0, 0, 100, 100); canvas.drawColor(Color.WHITE); mPaint.setColor(Color.RED); canvas.drawLine(0, 0, 100, 100, mPaint); mPaint.setColor(

20、Color.GREEN); canvas.drawCircle(30, 70, 30, mPaint); mPaint.setColor(Color.BLUE); canvas.drawText(“Clipping“, 100, 30, mPaint); 裁剪演练 接下来例举关于裁剪使用的重要代码片段： 这里首先使用save记录当前的canvas配置，然后调用了translate方法对绘画 坐标系进行了位移，然后开始绘画场景。最后调用restore方法将canvas配置 还原到save时的状态。 在2D绘画中经常用到这样的save和restore组合，它们可以避免中途对canvas 的操作影响

21、到后面的绘画。 例如此处我们调用translate将坐标系移动到（10，10）点，如果不用save和 restore，则以后无论画什么东西，都会偏移位置。这样计算坐标很不方便。 canvas.save(); canvas.translate(10, 10); drawScene(canvas); canvas.restore(); 文本绘画演练 最后，我们来进行文本方面的演练，实现TestTextActivity类。下面例举关于 文本演练的重要代码片段： 重载View的onSizeChanged方法，获取屏幕中点的坐标（用于文字对齐） 定义一个贝塞尔样条曲线，用于演示按轨迹（Path）来绘画文

22、字的效果 protected void onSizeChanged(int w, int h, int ow, int oh) super.onSizeChanged(w, h, ow, oh); mX = w * 0.5f; mPath = new Path(); mPath.moveTo(10, 0); mPath.cubicTo(100, -50, 200, 50, 300, 0); 文本绘画演练 获取字符串的每个字符的位置（在演示的中间，绘画Positioned字符串的时候， 在每个字母开始前都画了一条分割线，如果我们要知道字符串中文字的具体 位置，可以使用这个方法）。 private

23、 float buildTextPositions(String text, float y, Paint paint) float widths = new floattext.length(); int n = paint.getTextWidths(text, widths); float pos = new floatn * 2; float accumulatedX = 0; for (int i = 0; i n; i+) posi * 2 + 0 = accumulatedX; posi * 2 + 1 = y; accumulatedX += widthsi; return pos; 文本绘画演练 到此，我们完成了所有的基本绘图演练。 同学们可以通过它掌握基本的绘图，裁剪 以及文本的操作等技巧。 下一次课程将会更深入的介绍2D绘图的 高级内容。 总结 Bitmap，Paint，Canvas等类的关键成员 如何使用Canvas在View上进行绘画 本课程到此结束，谢谢！