[ Android Studio ] 使用 View 之 onDraw 在畫布 Canvas 繪畫出圓形等方法。

此教學是顯示在 ConstraintLayout 上面的方法，也可用到於顯示 SurfaceView 內。

SurfaceView 教學網址如下：
https://devildemon20100423.blogspot.com/2020/03/android-studio-surfaceview-canvas.html

一、程式顯示語法：

package com.example.canvas_0;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ConstraintLayout CL=findViewById(R.id.CL);


DrawView view=new DrawView(this);
view.setMinimumHeight(700);//最小高
view.setMinimumWidth(700);//最小寬
view.invalidate();
CL.addView(view);
}
}

二、DrawView 類別：

package com.example.canvas_0;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.view.View;

class DrawView extends View {
    public DrawView(Context context) {
        super(context);
    }
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);

        // 建立初始畫布
        Paint p = new Paint();// 創建畫筆
        p.setAntiAlias(true);// 設置畫筆的鋸齒效果。 true是去除。
        p.setColor(Color.BLUE);// 設置藍色
        p.setTextSize(18);// 設置文字的大小為 16。
        canvas.drawText("圓形：",20,80,p);// 寫一段文字
        canvas.drawCircle(100,80,40,p);// 畫一個圓

        // 直線繪畫        p.setColor(Color.GREEN);// 設置綠色
        canvas.drawText("直線：",200,80,p);// 寫一段文字
        canvas.drawLine(240, 100, 290, 100, p);//畫線(起點X, 起點Y, 終點X, 終點Y, 線條型態)

        // 斜線繪畫        p.setColor(Color.parseColor("#DC143C"));
        canvas.drawText("斜線：",300,80,p);
        canvas.drawLine(350, 80, 400, 100, p);

        // 弧線繪畫
        p.setColor(Color.parseColor("#8B0000"));
        canvas.drawText("弧線：",420,80,p);
        p.setStyle(Paint.Style.STROKE);//設置空心
        RectF oval1=new RectF(470,80,510,120);//繪製區域，左上座標為 (410,0) 右下座標為(440,30)
        canvas.drawArc(oval1, 90, 220, false, p);
        // oval1是圓弧所在的區域方塊        // 90 圓弧的起始角度畫出220弧區        

       // false 是否顯示半徑連線，true表示顯示圓弧與圓心的半徑連線，false表示不顯示。
//=====================200位置
        // 正方形繪畫
        p.setColor(Color.parseColor("#FF1493"));
        canvas.drawText("正方形：",20,200,p);
        p.setStyle(Paint.Style.FILL);//設置填滿
        canvas.drawRect(100, 200, 150, 250, p);// 正方形

        // 長方形繪畫
        p.setColor(Color.parseColor("#FFA07A"));
        canvas.drawText("長方形：",200,200,p);
        p.setStyle(Paint.Style.FILL);
        canvas.drawRect(300, 200, 450, 250, p);
//=====================400位置

        // 扇形繪圖
        p.setColor(Color.parseColor("#FF7F50"));
        canvas.drawText("扇形：",10,400,p);
        RectF oval2 = new RectF(60, 400, 160, 500);// 設置個新繪製區域
        //RectF oval2 = new RectF(左邊x,左邊y , 中心點X, 中心點Y);// 設置繪製區域方型
        canvas.drawArc(oval2, 0, 90, true, p);
        //canvas.drawArc(區域方型, 開頭位置, 畫出弧度,是否使用中心點, p);        

        //中心點不使用變成曲線填滿的型狀

        // 橢圓繪圖
        p.setColor(Color.parseColor("#FF4500"));
        canvas.drawText("橢圓形：",210,400,p);
        canvas.drawOval(new RectF(280,400,320,600),p);

        // 三角形繪圖
        p.setColor(Color.parseColor("#FF8C00"));
        canvas.drawText("三角形：",350,400,p);
        Path path = new Path();
        path.moveTo(430, 400);// 此點為多邊形的起點
        path.lineTo(500, 600);
        path.lineTo(430, 600);
        path.close(); // 使這些點構成封閉的多邊形
        canvas.drawPath(path, p);

        // 五角形繪圖
        p.setColor(Color.parseColor("#BDB76B"));
        canvas.drawText("五角形：",520,400,p);
        p.reset();//重置
        p.setColor(Color.LTGRAY);
        //p.setStyle(Paint.Style.STROKE);//設置空心

        Path path1=new Path();//Path類封裝由直線段，二次曲線和三次曲線組成的複合（多個輪廓）幾何路徑。
        //https://developer.android.com/reference/android/graphics/Path
        path1.moveTo(650, 400);
        path1.lineTo(700, 445);
        path1.lineTo(675, 500);
        path1.lineTo(625, 500);
        path1.lineTo(600, 445);
        path1.close();//封閉
        canvas.drawPath(path1, p);
//=====================700位置
        // 圓角矩形繪圖
        p.setTextSize(24);
        p.setColor(Color.parseColor("#FF00FF"));
        p.setAntiAlias(true);// 設置畫筆的去鋸齒效果
        canvas.drawText("圓角矩形：",10,700,p);
        RectF oval3 = new RectF(130, 700, 400, 800);//設置個新的長方形
        //RectF oval3 = new RectF(方形的左邊x, 方形的左邊y, 方形的右邊x, 方形的右邊y);
        canvas.drawRoundRect(oval3, 20, 15, p);

        //第二個參數是 x 方向上的圓角半徑，第三個參數是y方向上的圓角半徑

        // 曲線繪圖
        p.setColor(Color.parseColor("#91DEFF"));
        canvas.drawText("曲線：",430,700,p);
        p.setStyle(Paint.Style.STROKE);
        Path path2=new Path();
        path2.moveTo(450, 800);//設置畫曲線的起點
        path2.quadTo(550, 800, 550, 700);//設置貝塞爾曲線的控制點坐標和終點坐標
        //path2.quadTo(x的曲線坐標 ，y的曲線坐標 ，x的終點坐標，y的終點坐標);

        //設置貝塞爾曲線的控制點坐標和終點坐標
        canvas.drawPath(path2, p);//畫出貝塞爾曲線
    }


}