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);
效果如图:
