第6章 图形与图像处理.

Presentation on theme: "第6章 图形与图像处理."— Presentation transcript:

1 第6章 图形与图像处理

2 本章知识结构图

3 简单图形图像示例

4 简单图形图像 作为一款注重用户体验的应用程序，当然离不开图形、图像。在Android中对图形、图像提供了较好的支持，既包括一些常见的图片格式如JPG、PNG、GIF等，也包括XML定义的各具特色的图形，例如随状态变化的图片、渐变图形、逐帧动画等，还包括自定义绘图相关API，用户可根据自己的设计自由绘制。 Android中图形图像通常作为一种资源文件，当需要使用时将其添加到res/drawable文件夹下，然后系统会自动的在R.java文件中生成资源id。生成规则为：res文件夹对应了R.java类，res文件夹下的drawable子文件夹对应了R.java类中的drawable静态内部类，drawable文件夹下的一个资源文件，对应了R.drawable内部类中的一个静态成员变量。

5 简单图形图像 成员变量的名称和资源文件的名称一致，由于成员变量的名称不能以数字开头，所以图片资源命名时不能以数字开头。此外，Android中还对资源文件名进一步约束，不能出现大写字母，只能为小写字母、小数点、下划线、数字。 注意：Android对资源文件忽略后缀名，因此，后缀名中可以包含大写字母。当两个图片资源文件名相同，后缀名不同时，Android会将其看成是一张图片，只会生成一个资源id。

6 简单图形图像 将图片资源添加到APP应用中后，又该如何访问呢？例如在Android应用的drawable文件夹下添加了一张图片logo.png。 Android中对图片资源的引用主要有两种方式： （1）在Java代码中，通过R.drawable.资源名即可找到对应的图片资 源，例如R.drawable.logo； @drawable/logo。 注意：R.drawable.logo只是一个int类型的常量，如果想获得实际的图片对象，则需要调用Activity类的getResources( )方法获取应用的所有资源，然后再调用该类的getDrawable（int id）方法把资源id传递进去即可得到图片对象。

7 Drawable对象 Drawable类是Android中用于封装图形图像的基类，该类是一个抽象类，提供了一些共同的属性和方法，例如设置区域、透明度等。在Android中大部分涉及到图片的方法都可以传递Drawable对象，例如View类中设置背景：setBackground(Drawable background) ，ImageView类中显示图片：setImageDrawable(Drawable drawable)等。 Drawable本身作为一个抽象类是无法实例化的，Android中为Drawable定义了很多子类，适应于不同的场景。例如BitmapDrawable用于封装位图、ShapeDrawable用于封装自定义的一些形状、StateListDrawable用于封装随状态变化的图片、AnimationDrawable用于封装逐帧动画等。

8 BitmapDrawable位图 位图就是平常我们所看到的通过相机等设备拍摄出来的图片，计算机中图片是通过像素点阵显示的，将位图不断放大，将看到类似于马赛克的像素点。位图的放大与缩小将会影响图片的清晰度。 Bitmap用于表示一张位图，BitmapDrawable用于封装Bitmap对象。 Bitmap对象包装成BitmapDrawable对象 BitmapDrawable bd=new BitmapDrawable(Bitmap bitmap); 根据BitmapDrawable对象获取Bitmap对象 Bitmap bitmap=bd.getBitmap();

9 Bitmap位图 Bitmap类常用方法 方法 描述
createBitmap (Bitmap source, int x, int y, int width, int height) 从原位图source的指定坐标点 (x,y) 开始，截取宽为width，长为height的部分，创建一个新的Bitmap对象 createBitmap (int width, int height, Bitmap.Config config) 创建一个宽为width，长为height的新位图 getHeight() 获取位图的高度 getWidth() 获取位图的宽度 isRecycle() 返回该Bitmap对象是否已被回收 recycle() 强制一个Bitmap对象立即回收自己

10 BitmapFactory位图工厂 BitmapFactory类常用方法
BitmapFactory是一个工具类，该类所有的方法都是静态方法，定义了一些从不同的数据源来解析、创建Bitmap对象的方法，如资源ID、文件路径、文件和数据流等方式。 BitmapFactory类常用方法 方法 描述 decodeByteArray (byte[] data, int offset, int length) 从指定的data字节数组的offset位置，将长度为length的字节数据解析成Bitmap对象 decodeFile (String pathName) 从pathName指定的文件中解析，创建一个Bitmap对象 decodeResource (Resources res, int ID) 从指定的资源ID中解析创建Bitmap对象 decodeStream (InputStream is) 从指定的输入流解析，创建一个Bitmap对象

11 ShapeDrawable自定义形状 ShapeDrawable用于定义一个基本的几何图形（如矩形、圆形、线条等），这里的形状可以理解为矢量图，可以随着控件的大小变化而变化。定义ShapeDrawable的XML文件的根元素是<shape…/>元素，该元素可指定如下属性和标签。 android:shape属性指定图形类型 <corners…/>设置矩形四个角的弧度 <gradient…/>设置几何图形的渐变颜色 <padding…/>设置几何图形的内边距 <solid…/>设置几何图形的填充 <stroke…/>设置几何图形的画笔

12 ShapeDrawable自定义形状 注意：
<solid…/>标签和<gradient…/>标签都是对填充色进行设置，一个是设置为纯色，一个是设置为渐变色，所以两个效果不可能同时出现，那么究竟采用哪个呢？谁写在后面用谁的，类似于后面的覆盖了前面的。 <stroke…/>标签中android:dashWidth和android:dashGap两个属性要结合使用才能实现虚线框的效果。独自使用，没有虚线效果。

13 ShapeDrawable自定义形状

14 StateListDrawable随状态变化的图片
StateListDrawable用于组织多个Drawable对象，当使用 StateListDrawable作为目标控件的背景、前景图片时，所显示的图片会随 着目标控件状态的改变而自动切换。对应的XMl根元素为<selector…/> 常见属性如下： android:drawable 指定图片 android:state_pressed 是否按下，如一个按钮触摸或者点击。 android:state_focused 是否取得焦点，如选中一个文本框。 android:state_selected 是否被选中 android:state_checked 是否被勾选 。。。。。。 注意:如果有多个item，那么程序将自动从上到下进行匹配，最先匹配的将得到应用。如果一个item没有任何的状态说明，那么它将可以被任何一个状态匹配。

15 AnimationDrawable逐帧动画
逐帧动画的原理是利用人的视觉的滞后性，在时间轴的每帧上绘制不同的内容，然后在足够短的时间内进行播放，给人的感觉就如同连续的动画。 Android中通过AnimationDrawable类封装逐帧动画，该类中提供了一个关键方法addFrame(Drawable frame, int duration)用于添加一个关键帧。该方法传递两个参数：第一个参数为图片，表示这一帧所显示的内容；第二个参数为这一帧所持续的时间，单位为毫秒。只需多次调用该方法即可在多张图片间切换，每张图片持续的时间足够短，即可达到动画效果。

16 AnimationDrawable逐帧动画
创建逐帧动画的一般方法：先在程序中存放逐帧动画的素材，然后在res文件夹下创建一个anim文件夹，再在该文件夹下创建一个XML文档，对应的根元素为<animation-list…/>，在根元素下可添加<item…/>标签，一个<item…/>标签表示一帧，在<item…/>标签内包含两个属性：一个是android:drawable用于指定需要显示的图片；另一个是android:duration用于指定该图片持续的时间，单位为毫秒。 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android=" android:oneshot=["true"|"false"]> <item android:drawable="…" android:duration="…"/> </animation-list>

17 综合示例 实现下图所示功能效果。界面中包含一个ImageView和两个Button，整体采用垂直线性布局嵌套水平线性布局。图片显示控件ImageView添加了背景图片和逐帧动画，按钮控件添加了背景，背景是随状态变化的图片，每一种状态所对应的图片又是通过XML文件自定义的形状，有边框和渐变效果。

18 自定义绘图 在Android应用中，Canvas和Paint是两个绘图的基本类，使用这两个类几乎可以完成所有的绘制工作。
Canvas：画布，2D图形系统最核心的一个类，作为参数传入onDraw()方法，完成绘制工作，该类提供了各种绘制方法，用于绘制不同的图形，例如点、直线、矩形、圆、文本、颜色、位图等。 Paint：画笔，用于设置绘制的样式、颜色等信息。

19 Canvas类常用方法 方法 描述 drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制弧形 drawBitmap (Bitmap bitmap, float left, float top, Paint paint) 绘制位图 drawCircle (float cx, float cy, float radius, Paint paint) 绘制圆形 drawLine (float startX, float startY, float stopX, float stopY, Paint paint) 绘制一条线 drawPoint (float x, float y, Paint paint) 绘制一个点 drawRect (float left, float top, float right, float bottom, Paint paint) 绘制矩形 drawText (String text, float x, float y, Paint paint) 绘制字符串

20 Paint类常用方法 方法 描述 setAlpha(int a) 设置透明度
setARGB(int a, int r, int g, int b) 绘制颜色 setColor(int color) 设置颜色 setShader(Shader shader) 设置渲染效果 setShadowLayer(float radius, float dx, float dy, int color) 设置阴影 setStrokeWidth(float width) 设置画笔粗细 setStyle(Paint.Style style) 设置画笔风格

21 Shader Android中提供了Shader类专门用来渲染图像以及一些几何图形，Shader本身是一个抽象类，它包括以下几个常见子类：BitmapShader、ComposeShader、LinearGradient、RadialGradient和SweepGradient。 BitmapShader主要用来渲染图像 LinearGradient 用来进行线性渲染 RadialGradient 用来进行环形渲染 SweepGradient 用来进行梯度渲染 ComposeShader则是一个混合渲染，可以和其他几个子类组合起来使用。 Shader类的使用需先创建一个Shader对象（通过子类的构造方法），然后通过Paint的setShader (Shader shader) 方法设置渲染对象即可。

22 Shader类的子类 子类 构造方法 描述 BitmapShader
BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY) 使用位图平铺的渲染效果 LinearGradient LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[ ] positions, Shader.TileMode tile) LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) 使用线性渐变来渲染图形 RadialGradient RadialGradient(float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile) RadialGradient(float x, float y, float radius, int color0, int color1, Shader.TileMode tile) 使用圆形渐变来渲染图形 SweepGradient SweepGradient(float cx, float cy, int[] colors, float[] positions) SweepGradient(float cx, float cy, int color0, int color1) 使用角度渐变来渲染图形 ComposeShader ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode) ComposeShader(Shader shaderA, Shader shaderB, Xfermode mode) 使用组合效果来渲染图形

23 Path Path用于规划路径，主要用于绘制复杂的几何图形。 方法 描述
addCircle(float x, float y, float radius, Path.Direction dir) 为路径添加一个圆形轮廓 addRect(float left, float top, float right, float bottom, Path.Direction dir) 为路径添加一个矩形轮廓 close() 将目前的轮廓闭合，即连接起点和终点 lineTo(float x, float y) 从最后一个点到点(x,y)之间画一条线 moveTo(float x, float y) 设置下一个轮廓的起点

24 PathEffect PathEffect是用来为路径添加效果，可以应用到任何Paint中从而影响线条绘制的方式，也可以改变一个形状的边角的外观并且控制轮廓的外表。 子类 描述 CornerPathEffect 圆角效果，使用圆角来代替尖角，从而对图形尖锐的边角进行平滑处理 DashPathEffect 虚线效果，第一个参数数组中下标为偶数的表示虚线的长度，下标为奇数的表示虚线间的距离。 DiscretePathEffect 与DashPathEffect相似，但是添加了随机性，需要指定每一段的长度和与原始路径的偏离度 PathDashPathEffect 定义一个新的路径，并将其用作原始路径的轮廓标记 SumPathEffect 添加两种效果，将两种效果结合起来 ComposePathEffect 在路径上先使用第一种效果，再在此基础上应用第二种效果

25 综合示例 实现右图所示功能效果。主要功能有：
（1）采用三种方式（空心画笔、实心画笔、设置了渲染效果的实心画笔）依次绘制圆、椭圆、矩形、圆角矩形和三角形。 （2）在三列图形右侧对应位置绘制相应字符串，添加文字说明。 （3）绘制添加了不同路径效果的三角形。 （4）动态绘制路径。

26 综合示例

27 测试题 1．以下文件放在Drawable文件夹下不会产生错误的是（ ）。
A）9abc.jpg B）abc_9.jpg C）Abc.9.jpg D）abcStart.jpg 2．Android中，在XML文件中定义形状时对应的根元素标签是（ ）。 A）<shape> B）<clip> C）<layer-list> D）<selector> 3．Android中，在XML文件中定义逐帧动画时对应的根元素为（ ）。 A）<set> B）<animation-list> C）<layer-list> D）<selector> 4．下列哪一类Drawable对象，可实现随状态变化的图片的效果。（ ） A）StateListDrawable B）LayerDrawable C）ShapeDrawable D）ClipDrawable 5．使用Android中Canvas类的drawRect(10,10,20,20,new Paint())绘制矩形，此矩形的面积是（ ）。 A） B） C）300 D）400

28 测试题 使用绘图API，绘制出一周天气的折线图效果，程序运行效果如右图所示。整个界面中只有一个自定义控件，所有内容都是通过绘图API绘制上去的。 提示：采用相对坐标系，首先计算出最高温度和最低温度，然后计算出中间值，以及最高值与最低值的差值，中间值对应纵坐标的中线，比中间值大的在上方，比中间值小的在下方。

29