在之前通過Circle畫了一個奧運五環,這次通過RectF來畫矩形,正常的就是長方形正方形之類的。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICMyYTMvw1dvwlMvwlM3VWaWV2Zh1Wa-cmbw5COnhHdwQmevlTavwFOwUjN4ITNtUGall3LcVmdhNXLwRHdo9CXt92YucWbpRWdvx2Yx5yazF2Lc9CX6MHc0RHaiojIsJye.png)
還是建立一個自定義View,CustomViewRectF,然後繼承View,實作裡面的兩個基本的構造方法,這樣就可以在布局中顯示了,自定義View代碼如下:
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));
}
}
複制
運作一下:
這個看到就是這樣的。
然後改一下
paint.setStyle(Paint.Style.STROKE);//空心
複制
可以看到左邊有一部分被遮擋住了
再畫長方形
RectF rectF = new RectF(10,10,100,200);//長方形
複制
然後運作
再多畫幾個長方形
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));
複制
再改一下
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的位置,形成從低到高
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));
複制
運作一下
再整體改一下形成旋轉的效果。
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));
複制
運作一下
再改一下:
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));
複制
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICMyYTMvw1dvwlMvwlM3VWaWV2Zh1Wa-cmbw5COnhHdwQmevlTavwFOwUjN4ITNtUGall3LcVmdhNXLwRHdo9CXt92YucWbpRWdvx2Yx5yazF2Lc9CX6MHc0RHaiojIsJye.png)
畫矩形記住一點,bottom - top等于矩形的高度,right - left 等于矩形的寬度就可以了。相信你的了解已經很深了吧。