android 之绘图

来源：互联网发布：ip数据库编辑：程序博客网时间：2024/05/17 19:21

特别推荐：
使用Android自带Gallery组件实现CoverFlow，源码+解析
http://www.eoeandroid.com/thread-39709-1-1.html
android平台水波效果！
http://www.eoeandroid.com/thread-263-1-1.html
对“中文天气预报”代码全注释（带有详细注解）
http://www.eoeandroid.com/thread-40558-1-1.html


这里就不做什么特别的说明了，源码里面说的很清楚。还是直接代码吧！


package com.view; import com.test.R;import android.view.View;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Path;import android.graphics.Shader;import android.graphics.LinearGradient; /* 自定义继承View 的MyView*/public class BasicViewDraw extends View {public BasicViewDraw(Context context) {super(context);} /* 重写onDraw（） */@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);/* 设置背景为白色 */ canvas.drawColor(Color.WHITE);Paint paint = new Paint();/* 去锯齿 */paint.setAntiAlias(true);/* 设置paint的颜色 */paint.setColor(Color.RED);/* 设置paint的 style 为STROKE：空心 */paint.setStyle(Paint.Style.STROKE);/* 设置paint的外框宽度 */paint.setStrokeWidth(3);/* 画一个空心圆形 */canvas.drawCircle(40, 40, 30, paint);/* 画一个空心正方形 */canvas.drawRect(10, 90, 70, 150, paint);/* 画一个空心长方形 */canvas.drawRect(10, 170, 70, 200, paint);/* 画一个空心椭圆形 */RectF re = new RectF(10, 220, 70, 250);canvas.drawOval(re, paint);/* 画一个空心三角形 */Path path = new Path();path.moveTo(10, 330);path.lineTo(70, 330);path.lineTo(40, 270);path.close();//记得要closecanvas.drawPath(path, paint);/* 画一个空心梯形 */Path path1 = new Path();path1.moveTo(10, 410);path1.lineTo(70, 410);path1.lineTo(55, 350);path1.lineTo(25, 350);path1.close();canvas.drawPath(path1, paint); /* 设置paint 的style为 FILL：实心 */paint.setStyle(Paint.Style.FILL);/* 设置paint的颜色 */paint.setColor(Color.BLUE);/* 画一个实心圆 */canvas.drawCircle(120, 40, 30, paint);/* 画一个实心正方形 */canvas.drawRect(90, 90, 150, 150, paint);/* 画一个实心长方形 */canvas.drawRect(90, 170, 150, 200, paint);/* 画一个实心椭圆 */RectF re2 = new RectF(90, 220, 150, 250);canvas.drawOval(re2, paint);/* 画一个实心三角形 */Path path2 = new Path();path2.moveTo(90, 330);path2.lineTo(150, 330);path2.lineTo(120, 270);path2.close();canvas.drawPath(path2, paint);/* 画一个实心梯形 */Path path3 = new Path();path3.moveTo(90, 410);path3.lineTo(150, 410);path3.lineTo(135, 350);path3.lineTo(105, 350);path3.close();canvas.drawPath(path3, paint);/* 设置渐变色 */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); /* 画一个渐变色圆 */canvas.drawCircle(200, 40, 30, paint);/* 画一个渐变色正方形 */canvas.drawRect(170, 90, 230, 150, paint);/* 画一个渐变色长方形 */canvas.drawRect(170, 170, 230, 200, paint);/* 画一个渐变色椭圆 */RectF re3 = new RectF(170, 220, 230, 250);canvas.drawOval(re3, paint);/* 画一个渐变色三角形 */Path path4 = new Path();path4.moveTo(170, 330);path4.lineTo(230, 330);path4.lineTo(200, 270);path4.close();canvas.drawPath(path4, paint);/* 画一个渐变色梯形 */Path path5 = new Path();path5.moveTo(170, 410);path5.lineTo(230, 410);path5.lineTo(215, 350);path5.lineTo(185, 350);path5.close();canvas.drawPath(path5, paint); /* 写字 */paint.setTextSize(24);canvas.drawText(getResources().getString(R.string.str_text1), 240, 50,paint);canvas.drawText(getResources().getString(R.string.str_text2), 240, 120,paint);canvas.drawText(getResources().getString(R.string.str_text3), 240, 190,paint);canvas.drawText(getResources().getString(R.string.str_text4), 240, 250,paint);canvas.drawText(getResources().getString(R.string.str_text5), 240, 320,paint);canvas.drawText(getResources().getString(R.string.str_text6), 240, 390,paint);}}

class BasicView2Draw extends View{ Paint paint;Bitmap bitmap; public BasicView2Draw(Context context) {super(context);paint = new Paint(Paint.ANTI_ALIAS_FLAG);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);} private Bitmap createBitmap1(){Bitmap bitmap1 = Bitmap.createBitmap(100, 100, Config.ARGB_8888);Canvas canvas = new Canvas(bitmap1);canvas.drawColor(Color.BLUE);// canvas.drawARGB(0, 0, 0, 0);// 透明色canvas.drawBitmap(bitmap, 0, 0, paint);canvas.drawText("Hello Android", 25, 55, paint);return bitmap1;} @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas); // 绘制位图// 1.绘制位图在（10，10）位置上canvas.drawBitmap(createBitmap1(), 10, 10, paint);// 2. canvas.drawBitmap(Bitmap bitmap,Rect src,Rect dest,Paint paint);// canvas.drawBitmap(Bitmap bitmap,Rect src,RectF dest,Paint paint);// 绘制位图到一个指定的矩形dest中，位图会自动进行平移和缩放等操作，如果src的参数不为null// 则会裁剪位图的部分区域来进行绘制Rect rect = new Rect(10, 10, 50, 60);RectF rectF1 = new RectF(180.0f, 20.0f, 240.0f, 80.0f);RectF rectF2 = new RectF(180.0f, 100.0f, 240.0f, 160.0f);canvas.drawBitmap(createBitmap1(), null, rectF1, paint);canvas.drawBitmap(createBitmap1(), rect, rectF2, paint); // 点paint.setStyle(Paint.Style.FILL_AND_STROKE);paint.setStrokeWidth(5.0f);paint.setColor(Color.YELLOW);canvas.drawPoints(new float[]{120,120,140,140,160,160,180,180}, paint); // 线paint.reset();// 重置画笔paint.setColor(Color.GREEN);paint.setAntiAlias(true);canvas.drawLine(30, 30, 130, 40, paint);paint.setColor(Color.RED);canvas.drawLines(new float[]{ 40,40,140,40 ,50,50,90,90 }, paint); // 矩形paint.setColor(Color.CYAN);canvas.drawRect(10, 150, 150, 250, paint);paint.setColor(Color.GRAY);canvas.drawRect(new Rect(10, 260, 150, 280), paint);paint.setColor(Color.DKGRAY);canvas.drawRect(new RectF(20.2f, 290.9f, 120.2f, 300.3f), paint); // 绘制文本// paint.setTextSize(20);// paint.setColor(0x40ffffff);// 半透明白色// paint.setTextAlign(Paint.Align.RIGHT);// 对齐方向// canvas.drawText("Cool Android", 250, 180, paint);// 这里注意，坐标(180,180)是文本的左下点坐标 // 画布平移：// 平移的单位是像素，分别是在x,y轴上平移的像素点// 正数代表的正方向，x轴为平面的右侧，y轴为平面的下方，相应的，负数则向反方向平移// canvas.translate(30.0f, 30.0f); // 画布缩放：// 参数分别是在想x，y轴上放大或缩小的倍数，大雨1为放大，小于1为缩小，// 缩放的原点默认为画布的原点(0,0)，也可以指定缩放的原点// canvas.scale(2.0f, 1.5f);// canvas.scale(0.5f, 0.5f, 100.0f, 100.0f);// 指定坐标(100.0f,100.0f)为缩放原点// 这里剖析一下第二个缩放方法，其实系统为我们做的事情是这样的/*scale(float sx, float sy, float px, float py){translate(px,py);scale(sx,sy);translate(-px,-py);}*/ // 画布旋转// 1.以画布为原点，顺时针旋转40.0f度// canvas.rotate(40.0f);// 2.以(100.11f, 100.22f)为原点，顺时针旋转50.0f度// canvas.rotate(50.0f, 100.11f, 100.22f);// 相应的，为了加深理解，我们再剖析一下第二个旋转方法// ，其实系统为我们做的事情是这样的/*rotate(float degrees, float px, float py){translate(px,py);rotate(degrees);translate(-px,-py);}*/ // 画布倾斜// skew(float sx,float xy);将画布在x及y轴方向上倾斜相应的角度，sx或sy为倾斜角度的tan值，// 如canvas.skew(1,0);为在x方向上倾斜45度 >> tan(45) = 1// canvas.skew(1,0);}}

package com.view; import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.Region;import android.util.AttributeSet;import android.view.View; /*** ---------------------------------------------------矩形区域-------------------------------------------------* canvas.clipRect(左上角x轴坐标, 左上角y轴坐标, 右下角x轴坐标, 右下角y轴坐标, Region.Op.XOR);* 最后一个参数有多个选择分别是：* //DIFFERENCE是第一次不同于第二次的部分显示出来 //REPLACE是显示第二次的 //REVERSE_DIFFERENCE 是第二次不同于第一次的部分显示 //INTERSECT：交集显示 //UNION：全部显示 //XOR补集，就是全集的减去交集剩余部分显示 * @author emmet1988.iteye.com**/public class ClipRectDraw extends View { Context context;Paint paint;Path path; public ClipRectDraw(Context context) {super(context);init();} public ClipRectDraw(Context context, AttributeSet attrs) {super(context, attrs);init();} public ClipRectDraw(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();} private void init(){paint = new Paint();paint.setAntiAlias(true);paint.setStrokeWidth(5);paint.setTextSize(15);paint.setTextAlign(Paint.Align.RIGHT);path = new Path();} @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.GRAY);//左上图canvas.save();canvas.translate(10, 10);drawScene(canvas);canvas.restore();//右上图canvas.save();canvas.translate(160, 10);canvas.clipRect(10, 10, 90, 90);canvas.clipRect(30, 30, 70, 70, Region.Op.XOR);drawScene(canvas);canvas.restore();//左中图canvas.save();canvas.translate(10, 130);path.reset();/*抛物曲线*/path.cubicTo(0, 0, 100, 0, 100, 100);path.cubicTo(100, 100, 0, 100, 0, 0);canvas.clipPath(path, Region.Op.REPLACE);drawScene(canvas);canvas.restore();//右中图canvas.save();canvas.translate(160, 130);canvas.clipRect(0, 0, 60, 60);canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);drawScene(canvas);canvas.restore();//左下图canvas.save();canvas.translate(10, 250);canvas.clipRect(0, 0, 60, 60);canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);drawScene(canvas);canvas.restore();//右下图canvas.translate(160, 250);canvas.clipRect(0, 0, 60, 60);canvas.clipRect(40, 40, 100, 100, Region.Op.REVERSE_DIFFERENCE);drawScene(canvas);canvas.restore();} private void drawScene(Canvas canvas){canvas.clipRect(0, 0, 100, 100);canvas.drawColor(Color.WHITE); paint.setColor(Color.RED);canvas.drawLine(0, 0, 100, 100, paint); paint.setColor(Color.GREEN);canvas.drawCircle(30, 70, 30, paint); paint.setColor(Color.BLUE);canvas.drawText("ChenJianLi", 100, 30, paint);} }

package com.view; import com.test.R; import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.drawable.BitmapDrawable;import android.view.View;/*** 在 Android 里面， Matrix 由 9 个 float 值构成，是一个 3*3 的矩阵。* cosX, -sinX,translateX * sinX, cosX,translateY* 0, 0, scale* 解释一下，上面的 sinX 和 cosX ，表示旋转角度的 cos 值和 sin 值，注意，* 旋转角度是按顺时针方向计算的。 translateX 和 translateY 表示 x 和 y 的平移量。* scale 是缩放的比例， 1 是不变， 2 是表示缩放 1/2 ，* @author emmet1988.iteye.com**/public class MatrixDraw extends View implements Runnable{ Bitmap bitmap;Matrix matrix = new Matrix();Paint paint; public MatrixDraw(Context context) {super(context);bitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.rotate_surfaceview)).getBitmap();paint = new Paint();paint.setAntiAlias(true);new Thread(this).start();} float m;float n;@Overrideprotected void onDraw(Canvas canvas) { /*float cosValue = (float)Math.cos(-Math.PI/m);float sinValue = (float)Math.sin(-Math.PI/m); Log.d("matrixdraw", "Math.PI =" + Math.PI);Log.d("matrixdraw", "Math.PI/m =" + Math.PI/m);Log.d("matrixdraw", "Math.cos(-Math.PI/m) =" + (float)Math.cos(-Math.PI/m));Log.d("matrixdraw", "Math.sin(-Math.PI/m) =" + (float)Math.sin(-Math.PI/m)); matrix.setValues(new float[]{cosValue,-sinValue,100,sinValue,cosValue,100,0, 0, 2});//举例，若缩放值为0.9，代表放大原图的十分之一// super.onDraw(canvas);//当然，如果界面上还有其他元素需要绘制，只需要将这句话写上就行了。  // Matrix matrix2 = new Matrix(matrix);canvas.drawBitmap(bitmap, matrix, paint);// canvas.drawBitmap(bitmap, matrix2, paint);*/ n ++;if (n == 60) {n = 0;}matrix.postRotate(n);matrix.postTranslate(n, n);matrix.postScale(1, 1, n, n);canvas.drawBitmap(bitmap, matrix, paint);} @Overridepublic void run() {while(!Thread.currentThread().isInterrupted()){try {Thread.sleep(100);postInvalidate();} catch (InterruptedException e) {Thread.currentThread().interrupt();}}} /*** 以左上角为顶点，缩放一半，逆时针旋转30度，* 然后沿x轴和y轴分别平移50个像素，* 代码 里面写的是100，为什么是平移50呢，* 因为缩放了一半。 * 大家可以自己设置一下Matrix的值，或者尝试一下两个* Matrix相乘，得到的值设置进去，* 这样才能对Matrix更加熟练。*/ }