android 之绘图

特别推荐：
使用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（） */
@Override
protected 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();//记得要close
canvas.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;
}
 
@Override
protected 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();
}
 
@Override
protected 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;
@Override
protected 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);
}
 
@Override
public 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更加熟练。
*/
 
}