【Android自定義View】繪圖之基礎篇（一）

時間 2019-11-29

原文原文鏈接

前言

自定義 view 老是繞不開onDraw，而onDraw則少不了Paint與Canvas，這裏咱們就說說這個。java

`Paint`

主要的方法：canvas

paint.setColor(Color.RED); //設置畫筆顏色 
paint.setAntiAlias(true);//抗鋸齒功能
paint.setStyle(Style.FILL);//設置填充樣式
paint.setStrokeWidth(30);//設置畫筆寬度
paint.setTextSize();//設置字體大小
複製代碼

setStyle 主要有FILL、STROKE、FILL_AND_STROKE

咱們來看看效果字體

Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(200, 300, 100, paint);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(500, 300, 100, paint);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(800, 300, 100, paint);
複製代碼

FILL和FILL_AND_STROKE 貌似是同樣的？咱們將strokeWidth設置爲100 this

能夠明顯的看到第二、3個圓變大了， STROKE、 FILL_AND_STROKE都會爲圓加上 strokeWidth/2

`Canvas`

直線

drawLine(float startX, float startY, float stopX, float stopY,Paint paint)spa

paint.setColor(Color.RED);
         canvas.drawLine(100, 100, 200, 300, paint);
複製代碼

drawLines(float[] pts, Paint paint).net

其中，pts 長度必須是 4個倍數3d

paint.setColor(Color.BLACK);
        float[] pts = {50, 50, 150, 50,
                150, 50, 150, 150,
                150, 150, 250, 150,
                250, 150, 250, 250};
        canvas.drawLines(pts, paint);
複製代碼

須要注意的是，50, 50, 150, 50 爲第1條線，150, 50, 150, 150爲第2條，150, 150, 250, 150爲第3條線，250, 150, 250, 250爲第4條線 code

drawLines(float[] pts, int offset, int count,Paint paint)cdn

offset表示起始位置 count表示從起始位置畫多少個點，必須是4個倍數blog

float[] pts = {50, 50, 150, 50,
                150, 50, 150, 150,
                150, 150, 250, 150,
                250, 150, 250, 250};
        paint.setColor(Color.BLACK);
        canvas.drawLines(pts, 0, 16, paint);
複製代碼

即和第二步中效果一致，咱們修改offset爲 4，count 爲 12，效果爲下圖

矩形

drawRect (float left, float top, float right, float bottom, Paint paint)

canvas.drawRect(100, 200, 400, 800, paint);

其表明的座標點以下圖所示

drawRect (RectF rect, Paint paint) drawRect (Rect r, Paint paint)

這2個實際上是同樣的，left、top、right、bottom和第1個是一致的

public Rect(int left, int top, int right, int bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
複製代碼

public RectF(float left, float top, float right, float bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
複製代碼

圓角矩形

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

其中，rx表明X軸圓角半徑，ry表明Y軸圓角半徑

RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawRoundRect(rectF, 100, 200, paint);
複製代碼

效果圖以下

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)

同矩形，rx、ry同方法1

圓形

drawCircle(float cx, float cy, float radius, Paint paint)

其中，cx爲圓心X軸座標，cy爲圓心Y軸座標，radius爲半徑

canvas.drawCircle(100, 200, 50, paint);
複製代碼

橢圓

drawOval(RectF oval, Paint paint) drawOval(float left, float top, float right, float bottom, Paint paint) 同矩形

RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawOval(rectF, paint);
複製代碼

弧線

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)

drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

startAngle 弧開始的角度，以X軸正方向爲0度

sweepAngle 弧持續的角度

useCenter 是否有弧的兩邊，true 閉合的，false 非閉合的

paint.setStyle(Paint.Style.STROKE);

        RectF rect = new RectF(50, 100, 200, 400);
        canvas.drawArc(rect, 0, 90, true, paint);

        
        RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawArc(rectF, 0, 90, false, paint);
複製代碼