1.先用一张图表示接下来代码中要用到的坐标
假设每个格子都是正方形，（画的不规范）
2.画图需要自定义一个类继承view，然后重写onDraw(Canvas canvas),然后在layout中使用
public class MyView extends View {public MyView(Context context) {super(context);}public MyView(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint paint = new Paint();//paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE); //stroke代表外壳, fill代表是实心paint.setStrokeWidth(4);int viewWidth = this.getWidth();int w = viewWidth/4;int a = w/2;int b= a/2;canvas.drawCircle(w , w , a , paint); //圆心x,y,半径，画笔canvas.drawRect(a , w * 2 , w + a , w * 3 , paint); //正方形左x上y右x下y的坐标canvas.drawRect(a , w * 3 + a , w + a , w * 4 , paint); //矩形RectF rel = new RectF(a , w * 4 + a , w + a , w * 5);canvas.drawRoundRect(rel , 15 , 15 , paint); //圆角矩形 2.3参数为x,y方向的圆角半径RectF rell = new RectF(w * 2 + a , w - b , w * 3+ a , w + b); //能框住椭圆的矩形canvas.drawOval(rell , paint); //椭圆//path 可以画任何图形Path path1 = new Path();path1.moveTo(w * 3 , w * 2); //path移到第一个点之后连线到其他点path1.lineTo(w * 3 + a , w * 3);path1.lineTo(w * 2 + a , w * 3 );path1.close();//将最后一个点和第一个点连起来canvas.drawPath(path1 , paint); //三角形Path path2 = new Path();path2.moveTo(w * 3 - b , w * 3 + a);path2.lineTo(w * 3 + b , w * 3 + a);path2.lineTo(w * 3 + a , w * 4);path2.lineTo(w * 3 , w * 4 + a);path2.lineTo(w * 2 + a , w * 4);path2.close();canvas.drawPath(path2 , paint); //五边形}
}<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.example.liuyan.stronganima.MyViewandroid:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>效果如下：
3.改变paint画笔的风格,其他不变
paint.setStyle(FILL);
效果如下:
4.设置paint的填充效果为渐变风格，其他不变
当paint.setstyle = stoke时，代码如下：
public class MyView extends View {public MyView(Context context) {super(context);}public MyView(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint paint = new Paint();//paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE); //stroke代表外壳, fill代表是实心paint.setStrokeWidth(4);//为paint设置渐变器Shader shader = new LinearGradient(0,0,40,40,new int[]{Color.RED , Color.GREEN , Color.BLUE , Color.YELLOW} , null , Shader.TileMode.REPEAT);paint.setShader(shader);//设置阴影paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);int viewWidth = this.getWidth();int w = viewWidth/4;int a = w/2;int b= a/2;canvas.drawCircle(w , w , a , paint); //圆心x,y,半径，画笔canvas.drawRect(a , w * 2 , w + a , w * 3 , paint); //正方形左x上y右x下y的坐标canvas.drawRect(a , w * 3 + a , w + a , w * 4 , paint); //矩形RectF rel = new RectF(a , w * 4 + a , w + a , w * 5);canvas.drawRoundRect(rel , 15 , 15 , paint); //圆角矩形 2.3参数为x,y方向的圆角半径RectF rell = new RectF(w * 2 + a , w - b , w * 3+ a , w + b); //能框住椭圆的矩形canvas.drawOval(rell , paint); //椭圆//path 可以画任何图形Path path1 = new Path();path1.moveTo(w * 3 , w * 2); //path移到第一个点之后连线到其他点path1.lineTo(w * 3 + a , w * 3);path1.lineTo(w * 2 + a , w * 3 );path1.close();//将最后一个点和第一个点连起来canvas.drawPath(path1 , paint); //三角形Path path2 = new Path();path2.moveTo(w * 3 - b , w * 3 + a);path2.lineTo(w * 3 + b , w * 3 + a);path2.lineTo(w * 3 + a , w * 4);path2.lineTo(w * 3 , w * 4 + a);path2.lineTo(w * 2 + a , w * 4);path2.close();canvas.drawPath(path2 , paint); //五边形}
}效果:
当 paint.setStyle = fill时，如下：
效果如下:
一些代码解释如下:
public class MyView extends View {int a;int w;int b;public MyView(Context context) {super(context);}public MyView(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int viewWidth = this.getWidth();w = viewWidth/4;a = w/2;b= a/2;canvas.drawColor(Color.WHITE);Paint paint = new Paint();//paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStyle(Paint.Style.FILL); //stroke代表外壳, fill代表是实心paint.setStrokeWidth(4);//为paint设置渐变器//LinearGradient的1234参数为：（0，0 到 w,w 的渐变区域）//5参数为：渐变颜色数组从红到黄//6参数为：颜色数组的相对位置 可设置为null//7参数为:平铺方式 有(clamp(超出区域用之前的边界渲染) , repeat(超出区域重复渲染) , mirror(超出区域镜像渲染))Shader shader = new LinearGradient(0,0,w,w,new int[]{Color.RED , Color.GREEN , Color.BLUE , Color.YELLOW} , null , Shader.TileMode.REPEAT);paint.setShader(shader);//设置阴影(该阴影的设置似乎只对path画的图可以产生阴影,对drawtext可以产生阴影，直接用canvas的函数画图，不产生阴影)//第一个参数为阴影层与真正的层的z轴距离为25//第2.3参数为阴影相对于真正的层在x轴和y轴的偏移距离//第4参数为阴影的颜色paint.setShadowLayer(25 , 50 , 0 , Color.GRAY);canvas.drawCircle(w , w , a , paint); //圆心x,y,半径，画笔canvas.drawRect(a , w * 2 , w + a , w * 3 , paint); //正方形左x上y右x下y的坐标canvas.drawRect(a , w * 3 + a , w + a , w * 4 , paint); //矩形RectF rel = new RectF(a , w * 4 + a , w + a , w * 5);canvas.drawRoundRect(rel , 15 , 15 , paint); //圆角矩形 2.3参数为x,y方向的圆角半径RectF rell = new RectF(w * 2 + a , w - b , w * 3+ a , w + b); //能框住椭圆的矩形canvas.drawOval(rell , paint); //椭圆//path 可以画任何图形Path path1 = new Path();path1.moveTo(w * 3 , w * 2); //path移到第一个点之后连线到其他点path1.lineTo(w * 3 + a , w * 3);path1.lineTo(w * 2 + a , w * 3 );path1.close();//将最后一个点和第一个点连起来canvas.drawPath(path1 , paint); //三角形Path path2 = new Path();path2.moveTo(w * 3 - b , w * 3 + a);path2.lineTo(w * 3 + b , w * 3 + a);path2.lineTo(w * 3 + a , w * 4);path2.lineTo(w * 3 , w * 4 + a);path2.lineTo(w * 2 + a , w * 4);path2.close();canvas.drawPath(path2 , paint); //五边形}
}效果如下：
最后加上canvas.drawText();在之前的代码的最后加：
paint.setTextSize(60);//参数二三为一个坐标点，对应字符串外框的左下点canvas.drawText("你好啊！" , w+a+10 , w*5 , paint);效果如图:
