第6章 图像与图形处理 QQ号: QQ群: (Android编程入门) 网络资源:

Slides:



Advertisements
Similar presentations
网络应用程序设计 2014 JavaBean. JavaBean 及其属性 JavaBean 就是一种 Java 的组件技术 JavaBean 是 Java 类 JavaBean 通过约定的方法名实现属性功能 简单属性 void setXxx(Type value) Type getXxx() boolean.
Advertisements

JAVA 编 程 技 术 主编 贾振华 2010年1月.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
企业涉税业务基本知识宣传 郑州航空港区国家税务局机场税务分局 王 磊.
第13章 繪圖與多媒體 13-1 顯示圖檔-行動相簿 13-2 音樂播放-音樂播放器 13-3 影片播放-視訊播放器
實驗五:多媒體播放器選單介面.
第三章 数据类型和数据操作 对海量数据进行有效的处理、存储和管理 3.1 数据类型 数据源 数据量 数据结构
Part 2 開發Android應用程式的流程
PRESENTED BY OfficePLUS
C++中的声音处理 在传统Turbo C环境中,如果想用C语言控制电脑发声,可以用Sound函数。在VC6.6环境中如果想控制电脑发声则采用Beep函数。原型为: Beep(频率,持续时间) , 单位毫秒 暂停程序执行使用Sleep函数 Sleep(持续时间), 单位毫秒 引用这两个函数时,必须包含头文件
在PHP和MYSQL中实现完美的中文显示
第九章 字符串.
Java Applet 介绍.
第9章 Android图形图像处理 QQ号: QQ群: (Android编程-清华版)
第6章 图形与图像处理.
Chapter 6 Advanced UI Design.
Chapter 6 進階UI設計.
CH7 佈局、按鈕與文字編輯元件.
Android + Service 建國科技大學 資管系 饒瑞佶.
走进编程 程序的顺序结构(二).
辅导课程六.
网络常用常用命令 课件制作人:谢希仁.
绘制圆与多边形 椭圆形 绘制椭圆形的方法是 drawOval(x ,y , width , height), 绘制实心椭圆形的方法是
第6章 建立Android使用介面 6-1 介面元件的基礎 6-2 Android的事件處理 6-3 按鈕元件 6-4 文字元件
第五讲 四则运算计算器(一) 精品教程《C#程序设计与应用(第2版)清华大学出版社 谭恒松 主编
3.1 数据类型 3.2 标识符与关键字 3.3 常量 3.4 变量 3.5 运算符与表达式 3.6 一个编程实例
平面繪圖與動畫.
用event class 从input的root文件中,由DmpDataBuffer::ReadObject读取数据的问题
第七章 操作符重载 胡昊 南京大学计算机系软件所.
實驗十一:待辦事項程式 (儲存在手機上).
主编:钟元生 赵圣鲁.
Java语言程序设计 清华大学出版社 第8章 输入输出流(1).
UI 软件 设计 页面布局(三).
C++语言程序设计 C++语言程序设计 第七章 类与对象 第十一组 C++语言程序设计.
现代教育技术应用 第六章 素材的加工与处理 第19讲 动画的类型和采集 单 位: 北京师范大学 作 者: 毛荷&王翠霞.
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
计算机及办公软件应用 ©2013 苏州工业园区职业技术学院
Chapter 5 Basic UI Design.
本节内容 随机读取 视频提供:昆山爱达人信息技术有限公司.
VisComposer 2019/4/17.
实验四、TinyOS执行机制实验 一、实验目的 1、了解tinyos执行机制,实现程序异步处理的方法。
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
VB与Access数据库的连接.
補間動畫 (Tween Animation) 靜宜大學資管系 楊子青
姚金宇 MIT SCHEME 使用说明 姚金宇
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
本节内容 Win32 API中的宽字符 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群 : 联系电话:
Word中活用“艺▪图▪框” 信息技术必修(一).
iSIGHT 基本培训 使用 Excel的栅栏问题
3.16 枚举算法及其程序实现 ——数组的作用.
_13简单的GDI绘图操作 本节课讲师——void* 视频提供:昆山爱达人信息技术有限公司 官网地址:
本节内容 文件系统 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群 : 联系电话:
多层循环 Private Sub Command1_Click() Dim i As Integer, j As Integer
Visual Basic程序设计 第13章 访问数据库
RecyclerView and CardView
Python 环境搭建 基于Anaconda和VSCode.
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
基于列存储的RDF数据管理 朱敏
C++语言程序设计 C++语言程序设计 第一章 C++语言概述 第十一组 C++语言程序设计.
C++语言程序设计 C++语言程序设计 第九章 类的特殊成员 第十一组 C++语言程序设计.
第2章 Java语言基础.
第8章 创建与使用图块 将一个或多个单一的实体对象整合为一个对象,这个对象就是图块。图块中的各实体可以具有各自的图层、线性、颜色等特征。在应用时,图块作为一个独立的、完整的对象进行操作,可以根据需要按一定比例和角度将图块插入到需要的位置。 2019/6/30.
WEB程序设计技术 数据库操作.
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
位似.
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
学习目标 1、什么是列类型 2、列类型之数值类型.
Presentation transcript:

第6章 图像与图形处理 QQ号:1281147324 QQ群:490420731(Android编程入门) 网络资源: http://www.xs360.cn/book

本章知识结构图

简单图片 逐帧动画

作为一款注重用户体验的应用程序,当然离不开图形、图像的支持。在Android中对图形、图像提供了多种支持,一般使用Bitmap和BitmapFactory方法来封装和管理位图,通过Animation和AnimationDrawable类来保存和控制逐帧动画,使用Canvas和Path两个类绘制各种各样的图形,其中,Canvas可以绘制一些常见的规则图形,而Path则用于绘制一些不规则、自定义的图形。 静态图片即图片内容不发生变化的图片,通常用于显示、增添界面美观,例如图标、背景等。对于这种类型的图片通常由一些图片控件进行处理,如ImageView等。 动态图片即内容、大小、位置等会随着时间而变化的图片,一般采用不断重新绘制的方式来处理,每隔多少毫秒绘制一次,给人的感觉就是连续变化的。

2D绘图接口结构

6.1 简单图片和逐帧动画 图片不仅可以使用ImageView等图片控件显示,也可以作为Button、TextView等控件的背景。从广义的角度来看,Android应用中图片不仅包括*.png(首选)、*.jpg、*.gif(不建议)等格式的位图,也包括使用XML资源文件定义的各种Drawable对象。 逐帧动画是一种常见的动画形式,其原理是利用人的视觉的滞后性,在时间轴的每帧上绘制不同的内容,然后在足够短的时间内进行播放,给人的感觉就如同连续的动画。 由于逐帧动画的帧序列内容不一样,这不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画适合于表演细腻的动作。例如:人物走路、说话,动物奔跑等

6.1 简单图片和逐帧动画 简单图片 逐帧动画

6.1 简单图片和逐帧动画 程序结构

6.1.1 简单图片 1.Drawable对象 在Android中操作图片是通过Drawable类来完成的,Drawable类有很多子类,如BitmapDrawable类用于操作位图,AnimationDrawable类用于操作逐帧动画,ShapeDrawable类用于操作形状。 Android不允许图片资源的文件名中出现大写字母,且不能以数字开头。 需要指出的是,R.drawable.Xxx只是一个int类型的常量,代表该Drawable对象的ID,如果在Java程序中需要获得实际的Drawable对象,则可以调用getResources () 方法再调用Resources的getDrawable(int ID)方法来获取。

6.1.1 简单图片 2. Bitmap和BitmapFactory 6.1.1 简单图片 2. Bitmap和BitmapFactory Bitmap用于表示一张位图,BitmapDrawable用于封装一个Bitmap对象。 如果想将Bitmap对象包装成BitmapDrawable对象,可以调用BitmapDrawable的构造方法。 BitmapDrawable bd=new BitmapDrawable(Bitmap bitmap); 如果需要获取BitmapDrawable包装的Bitmap对象,可以调用BitmapDrawable的getBitmap()方法。 Bitmap bitmap=bd.getBitmap();

6.1.1 简单图片 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对象立即回收自己

6.1.1 简单图片 BitmapFactory类常用方法 方法 描述 6.1.1 简单图片 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对象

6.1.1 简单图片 3. 实现示例 1 <ImageView 2 android:id="@+id/bitmap1" 3 6.1.1 简单图片 3. 实现示例 1 <ImageView   2 android:id="@+id/bitmap1" 3 android:layout_width="match_parent" 4 android:layout_height="240dp" →高度固定,宽度填充整个屏幕 5 android:scaleType="fitXY" /> →设置图片的缩放方式 6 7 android:id="@+id/bitmap2" 8 android:layout_width="100dp" 9 android:layout_height="100dp" 10 android:layout_gravity="center_horizontal" →高度、宽度固定,位置水平居中 11 android:layout_marginTop="10dp" /> →设置两个ImageView的上下间距

6.1.1 简单图片 1 final ImageView bitmap1=(ImageView)findViewById(R.id.bitmap1); →获取ImageView对象 2 final ImageView bitmap2=(ImageView)findViewById(R.id.bitmap2);   3 bitmap1.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.grass)); →获取草地背景的位图 4 bitmap1.setOnTouchListener(new OnTouchListener() { →设置触摸监听器 5 public boolean onTouch(View v, MotionEvent event) { 6 BitmapDrawable bitmapDrawable =(BitmapDrawable)bitmap1.getDrawable(); 7 Bitmap bitmap=bitmapDrawable.getBitmap(); 8 float xchange=bitmap.getWidth()/(float)bitmap1.getWidth(); →获取原图的缩放量 9 float ychange=bitmap.getHeight()/(float)bitmap1.getHeight(); 10 int x=(int)(event.getX()*xchange); →获取触摸的坐标对应原图上的位置 11 int y=(int)(event.getY()*ychange); 12 if(x+50>bitmap.getWidth()){x=bitmap.getWidth()-50;} →对越界情况的处理 13 if(x-50<0){ x=50;} 14 if(y+50>bitmap.getHeight()){y=bitmap.getHeight()-50;} 15 if(y-50<0){ y=50;} 16 bitmap2.setImageBitmap(Bitmap.createBitmap(bitmap, x-50, y-50, 100, 100)); →以点击的位置为中心查看原图的局部细节 17 bitmap2.setVisibility(View.VISIBLE); 18 return false; 19 } 20 });

6.1.2 逐帧动画 1.创建逐帧动画 创建逐帧动画的一般方法:先在程序中存放逐帧动画的素材,再在res文件夹下创建一个anim文件夹,再在该文件夹下创建一个XML文档,在<animation-list…/>元素中添加<item…/>元素来定义动画的全部帧。 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true"|"false"]> <item android:drawable="…" android:duration="…"/> </animation-list> 注意:Android也支持在代码中创建逐帧动画,调用AnimationDrawable的addFrame(Drawable frame,int duration) 方法即可,类似于使用XML方法创建时的<item…/>。

6.1.2 逐帧动画 其中: (1)android:oneshot属性定义动画是否循环播放。true---只播一次,不循环播放;false---循环播放。 (2)<item.../>元素定义每一张图片的内容和播放持续时间。android:drawable指定内容,android:duration指定时间。 (3)<item...>元素出现的顺序指定图片播放的顺序。 Android也支持在代码中创建逐帧动画: 调用AnimationDrawable的addFrame (Drawable frame, int duration) 方法即可,类似于使用XML方法创建时的<item.../>。

6.1.2 逐帧动画 2. 实现示例 程序界面布局中定义了三个组件:两个Button和一个ImageView,两个Button用于控制逐帧动画的开始和停止,ImageView用于显示背景和逐帧动画。

6.1.2 逐帧动画 2. 实现示例 布局文件:activity_main.xml <LinearLayout 6.1.2 逐帧动画 布局文件:activity_main.xml 1 <LinearLayout 水平线性布局设置两个按钮 2 android:orientation="horizontal"   3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" 5 android:gravity="center"> 6 <Button “动画开始”按钮 7 android:id="@+id/start" 8 android:layout_width="wrap_content" 9 10 android:text="@string/start"/> 11 “动画停止”按钮 12 android:id="@+id/stop" 13 14 15 android:text="@string/stop"/> 16 </LinearLayout> 17 <ImageView 18 android:id="@+id/animImg" 19 20 21 android:background="@drawable/grass" 设置草地为背景图片 22 android:scaleType="center" 设置图片的缩放类型 23 android:src="@anim/horse" /> 逐帧动画为马的奔跑 2. 实现示例

6.1.2 逐帧动画 两个按钮代码所在文件:/Bitmap_AnimationTest/src/com/example/bitmap_animationtest/MainActivity.java 2. 实现示例 1 final Button start=(Button)findViewById(R.id.start);   2 final Button stop=(Button)findViewById(R.id.stop); 3 final ImageView animImg=(ImageView)findViewById(R.id.animImg); 4 final AnimationDrawable anim=(AnimationDrawable)animImg.getDrawable(); 获取逐帧动画的AnimationDrawable对象 5 start.setOnClickListener(new OnClickListener() { 为“动画开始”按钮添加单击事件处理 6 public void onClick(View v) { 7 anim.start(); 开始动画 8 } 9 }); 10 stop.setOnClickListener(new OnClickListener() { 为“动画停止”按钮添加单击事件处理 11 12 anim.stop(); 停止动画 13 14

6.1.2 逐帧动画 2. 实现示例 该程序在使用android:src="@anim/horse"引用逐帧动画 6.1.2 逐帧动画 2. 实现示例 该程序在使用android:src="@anim/horse"引用逐帧动画 如果无需草地背景,也可以使用android:background="@anim/horse“ 将逐帧动画作为背景显示, 在代码中将“final AnimationDrawable anim=(AnimationDrawable)img.getDrawable () ;” 改为“final AnimationDrawable anim=(AnimationDrawable)img. getBackground ();”。

6.1.3 示例讲解 要实现示例的在简单图片和逐帧动画界面中进行切换功能,需要利用ToggleButton控件。 6.1.3 示例讲解 要实现示例的在简单图片和逐帧动画界面中进行切换功能,需要利用ToggleButton控件。 首先在界面布局中添加ToggleButton控件。 1 <ToggleButton   2 android:id="@+id/change" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:layout_gravity="center_horizontal" 6 android:textOn="@string/anim" →状态为on时显示的文本为“切换到逐帧动画” 7 android:textOff="@string/bitmap" →状态为off时显示的文本为“切换到简单图片” 8 android:checked="true" /> →设置初始状态为on

6.1.3 示例讲解 该示例完整的代码请参考 codes\chapter09\Bitmap_AnimationTest 6.1.3 示例讲解 然后在代码中为ToggleButton添加一个状态改变的监听器,状态为on时显示简单图片的界面,状态为off时显示逐帧动画的界面。 该示例完整的代码请参考 codes\chapter09\Bitmap_AnimationTest

6.2 自定义绘图 除了可以使用程序中的图片资源外,Android应用还可以自行绘制图形,也可以在运行时动态地生成图片,前面我们所讲的自定义控件就用到了自定义绘图。 在Android应用中,Canvas和Paint是两个绘图的基本类,使用这两个类几乎可以完成所有的绘制工作。 Canvas:画布,2D图形系统最核心的一个类,作为参数传入onDraw()方法,完成绘制工作,该类提供了各种绘制方法,用于绘制不同的图形,例如点、直线、矩形、圆、文本、颜色、位图等。 Paint:画笔,用于设置绘制的样式、颜色等信息。

6.2 自定义绘图 第2章介绍了如何自定义控件 本节介绍利用自定义方法进行绘图的相关类的使用。 示例:自定义绘图的程序。 程序清单: codes\chapter09\CanvasTest

6.2.1 Canvas和Paint 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) 绘制字符串

6.2.1 Canvas和Paint 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) 设置画笔风格

6.2.1 Canvas和Paint 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) 设置画笔风格

6.2.2 Shader 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) 使用组合效果来渲染图形

6.2.3 Path和PathEffect 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) 设置下一个轮廓的起点

PathEffect类的子类 子类 构造方法 描述 CornerPathEffect CornerPathEffect(float radius) 使用圆角来代替尖角,从而对图形尖锐的边角进行平滑处理 DashPathEffect DashPathEffect(float[] intervals, float phase) 创建一个虚线的轮廓(短横线/小圆点) DiscretePathEffect DiscretePathEffect(float segmentLength, float deviation) 与DashPathEffect相似,但是添加了随机性,需要指定每一段的长度和与原始路径的偏离度 PathDashPathEffect PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect. Style style) 定义一个新的路径,并将其用作原始路径的轮廓标记 SumPathEffect SumPathEffect(PathEffect first, PathEffect second) 添加两种效果,将两种效果结合起来 ComposePathEffect ComposePathEffect(PathEffect outerpe, PathEffect innerpe) 在路径上先使用第一种效果,再在此基础上应用第二种效果

6.2.4 示例讲解 示例没有采用XML进行界面布局,而是直接使用代码布局 该示例完整的代码请参考 6.2.4 示例讲解 示例没有采用XML进行界面布局,而是直接使用代码布局 该示例完整的代码请参考 codes\chapter09\CanvasTest