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); } @Override protected 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.MyView android: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);
}
@Override
protected 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); } @Override protected 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);
效果如图: