Android開發 - onDraw透過RectF繪畫矩形(RectF解析)

阿俊学JAVA發表於2024-07-23
Android

RectF的引數解析

  • RectF(float left, float top, float right, float bottom);：可見四個引數均為float（浮點數）型別，其引數為：
    1. left：左邊座標；在繪製中常表示為起點的Y軸座標
    2. top：上邊左邊；在繪製中常表示為起點的X軸座標
    3. right：右邊座標；在繪製中常表示為終點的Y軸座標
    4. bottom：下邊座標；在繪製中常表示為終點的Y軸座標

onDraw透過RectF繪畫矩形

  • 新建一個自定義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(畫筆)部分程式碼修改為空心

    paint.setStyle(Paint.Style.STROKE);//空心

  • 實際效果：

  • 透過修改paint(畫筆)部分程式碼修改為長方形

    RectF rectF = new RectF(10,10,100,200);//長方形

  • 實際效果：

  • 透過paint(畫筆)新增部分程式碼修改為多個長方形

    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,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));

  • 實際效果：

相關文章