Android图形图像教学课件

第11章Android图形图像1、Android访问图片2、Android动画3、Android动态图像绘制4、Android图形特效5、Android与OpenGLESAndroid处理图形的能力非常强大，对于2D图形的处理不使用JavaAPI处理，Android系统定义了一系列处理2D图形的处理类，这些类分别位于android.graphics、android.graphics.drawbable.shapes和android.view.animation包中。对于3D图形的处理Android使用OPenGLES，这些类位于javax.microedition.khronos.opengles和android.opengl包中。Android系统中图形大体上分两类，一是静态图形的处理，也就是不经常变化的图片，如icon、logo、动画等。对于这种类型的图片通过各种Drawable类来处理，这种方式一般是将图片放在res/drawable目录或者res/animation目录中。对于动态图片（大小、位置格式经常变化的图片），一般采用不断的重新绘制绘制的方式来处理，例如游戏中场景、角色和道具等。Android使用访问图片创建Drawable对象Android在访问图片时，使用Drawable类及其子类BitmapDrawable、ColorDrawable、ShapeDrawable等类处理，关于Drawable类的初始化有三种方式，一是使用在工程中保存的图片；二是使用mxl定义Drawable属性；三是使用构造器来完成，但这种方法不经常被采纳。使用图片创建Drawable对象，在资源文件中保存一图片文件test.jpg，然后通过R.drawable.test使用该图片，代码如下：ImageViewimgv=(ImageView)findViewById(R.id.imgv);imgv.setImageResource(R.drawable.test);也可以使用xml文件定义Drawable对象例如：在AndroidManifest.xml文件中定义应用的图标：<applicationandroid:icon=@drawable/icon.........在布局文件中定义一个ImageView时指定Drawable对象<ImageViewandroid:id="@+id/imgv"android:layout_width="fill-parent"android:layout_height="wrap_content"android:src="@drawable/test"/>Bitmap和BitmapFactory如果图片是保存在SD卡中，就需要Bitmap和BitmapFactory两个类来读取SD卡中的文件例如：publicclassMainActivityextendsActivity{/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);//setContentView(R.layout.main);Stringpath="/sdcard/bg.png";Bitmapbm=BitmapFactory.decodeFile(path);ImageViewiv=newImageView(this);iv.setImageBitmap(bm);this.setContentView(iv);

}}Album实例这是一个通过调用系统相机实现拍照功能，拍照之后直接进入照片浏览，可以继续拍照也可以退出的小应用。如下图所示：publicclassMainActivityextendsActivity{/**Calledwhentheactivityisfirstcreated.*/privateStringlogTag="Exception";@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);try{Intentintent=newIntent(MediaStore.ACTION_IMAGE_CAPTURE);startActivityForResult(intent,0);}catch(Exceptione){Log.v(logTag,e.getMessage());}

}protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){try{if(requestCode!=0){return;

}super.onActivityResult(requestCode,resultCode,data);Bundleextras=data.getExtras();Bitmapb=(Bitmap)extras.get("data");Intentintent=newIntent();intent.setClass(this,ShowImageActivity.class);intent.putExtra("image",b);this.startActivity(intent);}catch(Exceptione){//TODO:handleexceptionLog.v(logTag,e.getMessage());}

}}publicstaticfinalStringMIME_TYPE_IMAGE_JPEG="image/jpeg";publicstaticfinalintACTIVITY_GET_IMAGE=0;publicstaticfinalStringFILE_NAME="name";publicstaticfinalStringFILE_TYPE="type";publicstaticfinalStringFILE_BITS="bits";publicstaticfinalStringFILE_OVERWRITE="overwrite";publicstaticfinalStringFILE_URL="url";privatebyte[]mContent;@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.showimage);IntentgetImage=newIntent(Intent.ACTION_GET_CONTENT);getImage.addCategory(Intent.CATEGORY_OPENABLE);getImage.setType(MIME_TYPE_IMAGE_JPEG);startActivityForResult(getImage,ACTIVITY_GET_IMAGE);

}@OverrideprotectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){if(resultCode!=RESULT_OK){return;

}Bitmapbm=null;ContentResolverresolver=getContentResolver();if(requestCode==ACTIVITY_GET_IMAGE){try{ UrioriginalUri=data.getData();//获得图片的urimContent=getBytesFromInputStream(resolver.openInputStream(Uri.parse(originalUri.toString())),3500000);bm=getPicFromBytes(mContent,null); ImageViewiv=getThemedImageView();//显示图片iv.setImageBitmap(bm);setContentView(iv);}catch(IOExceptione){System.out.println(e.getMessage());

}

}

}publicstaticbyte[]getBytesFromInputStream(InputStreamis,intbufsiz)throwsIOException{inttotal=0;byte[]bytes=newbyte[4096];ByteBufferbb=ByteBuffer.allocate(bufsiz);while(true){intread=is.read(bytes);if(read==-1)break;bb.put(bytes,0,read);total+=read;

}byte[]content=newbyte[total];bb.flip();bb.get(content,0,total);returncontent;

}privateImageViewgetThemedImageView(){ImageViewiv=newImageView(this);iv.setBackgroundResource(android.R.drawable.gallery_thumb);returniv;

}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){//TODOAuto-generatedmethodstubmenu.add(0,0,0,"继续拍照");returntrue;}@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){//TODOAuto-generatedmethodstubIntentintent=newIntent(this,MainActivity.class);startActivity(intent);returntrue;}publicstaticBitmapgetPicFromBytes(byte[]bytes,BitmapFactory.Optionsopts){if(bytes!=null)if(opts!=null)returnBitmapFactory.decodeByteArray(bytes,0,bytes.length,opts);elsereturnBitmapFactory.decodeByteArray(bytes,0,bytes.length);returnnull;}}<applicationandroid:icon="@drawable/icon"android:label="@string/app_name"><activityandroid:name=".MainActivity"android:label="@string/app_name"><intent-filter><actionandroid:name="ent.action.MAIN"/><categoryandroid:name="ent.category.LAUNCHER"/></intent-filter></activity><activityandroid:name=".ShowImageActivity"/></application><uses-sdkandroid:minSdkVersion="4"/><uses-permissionandroid:name="android.permission.CAMERA"/>

Android中的动画Tween动画Tween动画可以使视图组件移动、放大、缩小，以及产生透明的变化。例如在一个ImageView组件中，通过Tween动画可以使该视图实现放大、缩小、旋转、渐变等效果。Tween动画相关的类在android.view.animation包中，如：(1)Animation：抽象类，其他几个动画类继承自该类(2)ScaleAnimation类：控制尺寸变化的动画类(3)AlphaAnimation：控制透明变化的动画类(4)RotateAnimation:控制旋转变化的动画类(5)TranslateAnimation：控制移动变化的动画类(6)AnimationSet：定义动画属性集合类(7)AnimationUtils：动画的工具类总之，Tween动画一共有4种形式，具体如下：1、Alpha（渐变动画）实现类：AlphaAnimation常用构造器：AlphaAnimation(floatfromAlpha,float,toAlpha)常用构造器参数说明：fromAlpha:动画开始的透明度，toAlpha：动画结束前的透明度（取值范围是0.0～1.0）2、Scale(尺寸变化动画)实现类：ScaleAnimation常用构造器：ScaleAnimation(floatfromX,floattoX,floatfromY,floattoY,intpivotXtype,floatpivotXValue,intpivotYType,floatpivotYValue)常用构造器参数说明：fromX：起始X坐标上的伸缩尺寸toX：结束X坐标上的伸缩尺寸fromY：起始Y坐标上的伸缩尺寸toY：结束Y坐标上的伸缩尺寸pivotXType：在X轴上的伸缩模式，（取值有：Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT）pivotXValue：相对于X坐标的伸缩值pivotYType：在Y轴上的伸缩模式，（取值有：Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT）pivotYValue：相对于Y坐标的伸缩值3、Translate（位置变化动画）：实现类：TranslateAnimation常用构造器：TranslateAnimation(floatfromXData,floattoXAata,floatfromYData,floattoYData)常用构造器参数说明：fromXData:起始X坐标toXData：结束X坐标fromYData:起始Y坐标toYData：结束Y坐标4、Rotate（旋转变化动画）：实现类：RotateAnimation常用构造器：RotateAnimation(floatfromDegrees,floattoDegrees,intpivotXtype,floatpivotXValue,intpivotYType,floatpivotYValue)常用构造器参数说明：fromDegrees:起始旋转角度；toDegrees：结束旋转角度pivotXType：在X轴上的伸缩模式，（取值有：Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT）pivotXValue：相对于X坐标的伸缩值pivotYType：在Y轴上的伸缩模式，（取值有：Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT）pivotYValue：相对于Y坐标的伸缩值缩放效果截图

渐变效果截图

移动效果截图旋转效果截图

publicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);yixiu=(ImageView)findViewById(R.id.yixiu);yixiu.setVisibility(View.INVISIBLE);bs=(Button)findViewById(R.id.bs);ba=(Button)findViewById(R.id.ba);bt=(Button)findViewById(R.id.bt);br=(Button)findViewById(R.id.br);bs.setOnClickListener(this);ba.setOnClickListener(this);bt.setOnClickListener(this);br.setOnClickListener(this);

}@OverridepublicvoidonClick(Viewarg0){//TODOAuto-generatedmethodstubAnimationanimation=null;intid=arg0.getId();

switch(id){caseR.id.bs:yixiu.setVisibility(View.VISIBLE);animation=newScaleAnimation(0f,1f,0f,1f,Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,2f);animation.setDuration(3000);yixiu.setAnimation(animation);break;caseR.id.ba:yixiu.setVisibility(View.VISIBLE);animation=newAlphaAnimation(0.1f,1.0f);;animation.setDuration(3000);yixiu.setAnimation(animation);break;caseR.id.bt:yixiu.setVisibility(View.VISIBLE);animation=newTranslateAnimation(10,10,10,100);animation.setDuration(3000);yixiu.setAnimation(animation);break;caseR.id.br:yixiu.setVisibility(View.VISIBLE);animation=newRotateAnimation(0f,-1880f,Animation.RELATIVE_TO_SELF,0.8f,Animation.RELATIVE_TO_SELF,0.8f);animation.setDuration(8000);yixiu.setAnimation(animation);break;}}

除了通过以上“硬编码”实现Tween动画的4种效果外，还可以使用“软编码”即使用xml配置文件的方式来实现，这个xml文件在rs/anim目录中，这种方式是Android推荐使用的方式。首先定义各种动画xml文件1、myscale.xml<setxmlns:android="/apk/res/android"><scaleandroid:fromXScale="0.0"android:toXScale="1.0"android:fromYScale="0.0"android:toYScale="1.0"android:pivotX="50%"android:pivotY="50%"android:duration="5000"/></set>

2、myalpha.xml<setxmlns:android="/apk/res/android"><alphaandroid:fromAlpha="0.1"android:toAlpha="1.0"android:duration="5000"/></set>3、myrotate.xml<setxmlns:android="/apk/res/android"><rotateandroid:fromDegrees="0"android:toDegrees="180"android:pivotX="50%"android:pivotY="50%"android:duration="5000"/></set>4、mytrans.xml<setxmlns:android="/apk/res/android"><translateandroid:fromXDelta="10"android:toXDelta="100"android:fromYDelta="10"android:toYDelta="100"android:duration="5000"/></set>然后修改MainActivity.java中的代码：caseR.id.bs:yixiu.setVisibility(View.VISIBLE);AnimationsAnimation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.myscale);yixiu.startAnimation(sAnimation);break;caseR.id.ba:yixiu.setVisibility(View.VISIBLE);AnimationaAnimation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.myalpha);yixiu.startAnimation(aAnimation);break;caseR.id.bt:yixiu.setVisibility(View.VISIBLE);AnimationtAnimation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.mytrans);yixiu.startAnimation(tAnimation);break;caseR.id.br:yixiu.setVisibility(View.VISIBLE);AnimationrAnimation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.myroate);yixiu.startAnimation(rAnimation);break;运行结果同上例完全一致。Frame动画Frame动画是顺序播放图片来产生的一种动画效果类似于电影。例如要实现一个人走路的动画效果，可以通过3张图片实现：第一张是两脚着地；第二张是左脚着地；第三张是右脚着地。这样顺序播放就形成了人走路的动画了。Frame动画是通过AnimationDrawable类实现的。该类中有两个重要的方法是start()和stop()，分别用来开始和停止动画。动画一般是通过xml配置文件来进行配置的。在res/anim目录中定义xml文件，该文件的根元素是<animation-list>，子元素是<item>,子元素可以有多个。frame_anim.xml文件内容如下：<animation-listxmlns:android="/apk/res/android"android:oneshot="true"><itemandroid:drawable="@drawable/bugbear3_1"android:duration="500"/><itemandroid:drawable="@drawable/bugbear3_2"android:duration="500"/><itemandroid:drawable="@drawable/bugbear3_3"android:duration="500"/><itemandroid:drawable="@drawable/bugbear3_4"android:duration="500"/></animation-list>Frame动画截图代码如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#fff"android:gravity="center_vertical"

><ImageViewandroid:id="@+id/iamgeView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@anim/frame_anim“

/>

</LinearLayout>publicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);imageView=(ImageView)findViewById(R.id.iamgeView);ad=(AnimationDrawable)imageView.getBackground();

}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){menu.add(0,0,0,"开始");menu.add(0,1,1,"停止");returntrue;}@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){switch(item.getItemId()){case0:Animationanimation=newTranslateAnimation(10,100,10,10);animation.setDuration(6000);ad.start();imageView.startAnimation(animation);break;case1:ad.stop();break;}returntrue;}动态图形绘制动态图形绘制的基本思路是，创建一个View类或者SurfaceView类，重写onDraw()方法，使用Canvas对象在界面上绘制不同图形，使用invalidate()方法刷新界面。动态绘制图形的常见类有Canvas、Paint、Color、Path等。1、Canvas类：Canvas类是画布，提供了各种图形的绘制方法，如矩形、圆、椭圆、点、线、文字等。具体方法见下表方法名称方法描述drawText(Stringtext,floatx,floaty,Paintpaint)画文本drawPoint(float

x,float

y,Paintpaint)画点drawLine(float

startX,float

startY,float

soptX,float

stopY,Paintpaint)画线drawCircle(float

cx,float

cy,flaot

radius,Paintpaint)画圆drawOval(rectF

oval,paintpaint)画椭圆drawRect(rectF

rect,paintpaint)画矩形drawRoundRect(rectF

rect,float

rx,float

ry,paintpaint)圆角矩形clipRect(float

left,float

top,float

right,floatbottom)裁剪矩形clipRegion(Regionregion)裁剪区域2、Paint类：Paint类是画笔，用来描述图形的颜色和风格，如线宽、颜色、字体等信息。Paint类常用方法如下：方法名称方法描述Paint()构造方法setColor(intcolor)设置颜色setStrokeWidth(floatwidth)设置线宽setTextAlign(Paint.Alignalign)设置文字对齐setTextSize(floattextSize)设置文字尺寸setShader(Shadershader)设置渐变setAlpha(inta)设置alpha值reset()复位Paint默认设置3、Color类：Color类中定义了一些颜色常量和创建颜色的方法，颜色定义使用RGB定义，如下表：颜色属性名称描述BLACK黑色BLUE蓝色CYAN青色DKGRAY深灰色GRAY灰色GREEN绿色LIGRAY浅灰色MAGENTA紫色RED红色TRANSSARENT透明WHITE白色YELLOW黄色4、Path类：一般用来从某个点移动到另一个点连线，例如画梯形需要有点和连线，常使用的方法如下：方法名称方法描述lineTo(floatx,floaty)从最后点到指定点画线moveTo(floatx,floaty)移动到某一点reset()复位5、Shader类及其子类：用来渲染图像使用的类，子类有BitmapShader、ComposeShader、LinearGradient、RadialGradient、SweepGradient。各个类的用法参照SDKdoc。实例1：飞舞的小球，在这个例子中，通过自定义View，并继承View类，通过多线程机制不断的绘制并刷新，实现小球飞舞的情景。如图所示代码如下：classMyViewextendsViewimplementsRunnable{//图形当前坐标privateintx=20,y=20;//坐标控制开关booleanflagy=true;booleanflagx=true;//构造方法publicMyView(Contextcontext,AttributeSetattrs){super(context,attrs);//获得焦点setFocusable(true);//启动线程newThread(this).start();}publicvoidrun(){while(!Thread.currentThread().isInterrupted()){MyView.this.update();try{Thread.sleep(10);}catch(InterruptedExceptione){e.printStackTrace();}}}@OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);//实例化画笔Paintp=newPaint();//设置画笔颜色p.setColor(Color.WHITE);//画圆canvas.drawCircle(x,y,20,p);MyView.this.postInvalidate();}//更新坐标privatevoidupdate(){inth=getHeight();intw=getWidth();if(x==w-20)flagx=false;if(y==h-20)flagy=false;if(x==20)flagx=true;if(y==20)flagy=true;if(flagy)y+=5;if(!flagy)y-=5;if(flagx)x+=5;if(!flagx)x-=5;}}publicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);MyViewv=newMyView(this,null);setContentView(v);

}

}实例2：Canvas、Paint、Shader类综合应用publicclassMyViewextendsView{publicMyView(Contextcontext){super(context);}@OverrideprotectedvoidonDraw(Canvascanvas){//TODOAuto-generatedmethodstubsuper.onDraw(canvas);//设置画布颜色canvas.drawColor(Color.WHITE);Paintpaint=newPaint();//去除锯齿paint.setAntiAlias(true);paint.setColor(Color.RED);//设置样式paint.setStyle(Paint.Style.STROKE);//设置画笔粗细paint.setStrokeWidth(3);//画圆canvas.drawCircle(40,40,30,paint);//画矩形canvas.drawRect(10,90,70,150,paint);canvas.drawRect(10,170,70,200,paint);//声明矩形区域RectFre=newRectF(10,220,70,250);//画椭圆canvas.drawOval(re,paint);//实例化PathPathpath=newPath();path.moveTo(10,330);path.lineTo(70,330);path.lineTo(40,270);path.close();canvas.drawPath(path,paint);Pathpath1=newPath();path1.moveTo(10,410);path1.lineTo(70,410);path1.lineTo(55,350);path1.lineTo(25,350);path1.close();canvas.drawPath(path1,paint);paint.setStyle(Paint.Style.FILL);paint.setColor(Color.BLUE);//画圆canvas.drawCircle(120,40,30,paint);//画矩形canvas.drawRect(90,90,150,150,paint);canvas.drawRect(90,170,150,200,paint);//声明矩形区域RectFre2=newRectF(90,220,150,250);//画椭圆canvas.drawOval(re2,paint);//实例化PathPathpath2=newPath();path2.moveTo(90,330);path2.lineTo(150,330);path2.lineTo(120,270);path2.close();canvas.drawPath(path2,paint);Pathpath3=newPath();path3.moveTo(90,410);path3.lineTo(150,410);path3.lineTo(135,350);path3.lineTo(105,350);path3.close();canvas.drawPath(path3,paint);ShaderlShader1=newLinearGradient(0,0,100,100,newint[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW},null,Shader.TileMode.REPEAT);ShaderlShader2=newLinearGradient(0,0,100,100,Color.RED,Color.GREEN,Shader.TileMode.MIRROR);ShadersShader1=newSweepGradient(0,0,newint[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW},null);ShadersShader2=newSweepGradient(0,0,Color.RED,Color.GREEN);paint.setShader(lShader1);//画圆canvas.drawCircle(200,40,30,paint);//画矩形canvas.drawRect(170,90,230,150,paint);canvas.drawRect(170,170,230,200,paint);//声明矩形区域RectFre3=newRectF(170,220,230,250);//画椭圆canvas.drawOval(re3,paint);//实例化PathPathpath4=newPath();path4.moveTo(170,330);path4.lineTo(230,330);path4.lineTo(200,270);path4.close();canvas.drawPath(path4,paint);Pathpath5=newPath();path5.moveTo(170,410);path5.lineTo(230,410);path5.lineTo(215,350);path5.lineTo(185,350);path5.close();canvas.drawPath(path5,paint);paint.reset();paint.setColor(Color.BLACK);paint.setTextSize(24);canvas.drawText("圆形",240,50,paint);canvas.drawText("正方形",240,120,paint);canvas.drawText("长方形",240,190,paint);canvas.drawText("椭圆形",240,250,paint);canvas.drawText("三角形",240,320,paint);canvas.drawText("梯形",240,390,paint);}}publicclassMainActivityextendsActivity{/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(newMyView(this));

}}图形特效使用Matrix实现旋转平移和缩放在Android系统中Matrix类是一个矩阵，该类中有一个3*3的矩阵坐标，通过该类可以实现旋转、平移和缩放的综合应用。使用reset()方法初始化矩阵，使用setScale()设置缩放属性，setTranslate()设置平移属性，setRotate()设置旋转属性。publicclassMyViewextendsView{privateBitmapbitmap=null;privateMatrixmatrix=newMatrix();privatefloatangle=0.0f;privateintwidth;privateintheight;privatefloatscale=1.0f;privatebooleanisScale=false;publicMyView(Contextcontext){super(context);bitmap=BitmapFactory.decodeResource(this.getResources(),R.drawable.yixiu);width=bitmap.getWidth();height=bitmap.getHeight();this.setBackgroundColor(Color.WHITE);this.setFocusable(tr