在之前通过Circle画了一个奥运五环，这次通过RectF来画矩形，常规的就是长方形正方形之类的。
还是新建一个自定义View,CustomViewRectF，然后继承View,实现里面的两个基本的构造方法，这样就可以在布局中显示了，自定义View代码如下：
代码语言：javascript复制package com.llw.paintdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class CustomViewRectF extends View {
public CustomViewRectF(Context context) {
super(context);
}
public CustomViewRectF(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
private Paint customPaint(int color) {
Paint paint = new Paint();
paint.setColor(color);//画笔颜色
paint.setStyle(Paint.Style.FILL);//实心
paint.setStrokeWidth(6);//画笔宽度
paint.setAntiAlias(true);//光滑
return paint;
}
/**
* 在纸上画矩形
* @param canvas 纸
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 画矩形 以两个点来画，起点和终点，通常是左上为起点，右下为终点 以下面这个图来看
* 参数一：起点的Y轴坐标
* 参数二：起点的X轴坐标
* 参数三：终点的Y轴坐标
* 参数四：终点的Y轴坐标
*
* *
* *
* * top
* ****************
* * *
* left * * right
* * *
* * *
* ******************
* bottom *
* *
* *
* 可以看到，左和上无限延长就会在一个点，右和下也是如此，这样应该理解了吧
*
*/
RectF rectF = new RectF(10,10,200,200);
canvas.drawRect(rectF, customPaint(Color.BLUE));
}
}运行一下：
这个看到就是这样的。 然后改一下
代码语言：javascript复制paint.setStyle(Paint.Style.STROKE);//空心
可以看到左边有一部分被遮挡住了
再画长方形
代码语言：javascript复制RectF rectF = new RectF(10,10,100,200);//长方形然后运行
再多画几个长方形
代码语言：javascript复制 RectF rectF2 = new RectF(120,10,210,200);//长方形2
canvas.drawRect(rectF2, customPaint(Color.BLUE));
RectF rectF3 = new RectF(240,10,330,200);//长方形3
canvas.drawRect(rectF3, customPaint(Color.BLUE));
RectF rectF4 = new RectF(360,10,450,200);//长方形4
canvas.drawRect(rectF4, customPaint(Color.BLUE));
再改一下
代码语言：javascript复制 RectF rectF = new RectF(10,10,100,200);//长方形
canvas.drawRect(rectF, customPaint(Color.GREEN));
RectF rectF2 = new RectF(100,10,190,200);//长方形2
canvas.drawRect(rectF2, customPaint(Color.YELLOW));
RectF rectF3 = new RectF(190,10,280,200);//长方形3
canvas.drawRect(rectF3, customPaint(Color.BLUE));
RectF rectF4 = new RectF(280,10,370,200);//长方形4
canvas.drawRect(rectF4, customPaint(Color.RED));
再通过改边top的位置，形成从低到高
代码语言：javascript复制 RectF rectF = new RectF(10,160,100,200);//长方形
canvas.drawRect(rectF, customPaint(Color.GREEN));
RectF rectF2 = new RectF(100,120,190,200);//长方形2
canvas.drawRect(rectF2, customPaint(Color.YELLOW));
RectF rectF3 = new RectF(190,80,280,200);//长方形3
canvas.drawRect(rectF3, customPaint(Color.BLUE));
RectF rectF4 = new RectF(280,40,370,200);//长方形4
canvas.drawRect(rectF4, customPaint(Color.RED));运行一下
再整体改一下形成旋转的效果。
代码语言：javascript复制 RectF rectF = new RectF(10,10,300,100);//长方形
canvas.drawRect(rectF, customPaint(Color.GREEN));
RectF rectF2 = new RectF(300,10,390,300);//长方形2
canvas.drawRect(rectF2, customPaint(Color.YELLOW));
RectF rectF3 = new RectF(100,300,390,390);//长方形3
canvas.drawRect(rectF3, customPaint(Color.BLUE));
RectF rectF4 = new RectF(10,100,100,390);//长方形4
canvas.drawRect(rectF4, customPaint(Color.RED));运行一下
再改一下：
代码语言：javascript复制 RectF rectF = new RectF(10,100,300,190);//长方形
canvas.drawRect(rectF, customPaint(Color.GREEN));
RectF rectF2 = new RectF(300,10,390,300);//长方形2
canvas.drawRect(rectF2, customPaint(Color.YELLOW));
RectF rectF3 = new RectF(190,300,480,390);//长方形3
canvas.drawRect(rectF3, customPaint(Color.BLUE));
RectF rectF4 = new RectF(100,190,190,480);//长方形4
canvas.drawRect(rectF4, customPaint(Color.RED));画矩形记住一点，bottom - top等于矩形的高度，right - left 等于矩形的宽度就可以了。相信你的理解已经很深了吧。
