image.png

目錄

PATH

使用Path不僅能夠繪制簡(jiǎn)單圖形，也可以繪制這些比較復(fù)雜的圖形。
如繪制一個(gè)心形 正多邊形 五角星等．

Path封裝了由直線和曲線(二次，三次貝塞爾曲線)構(gòu)成的幾何路徑。你能用Canvas中的drawPath來把這條路徑畫出來(同樣支持Paint的不同繪制模式)，也可以用于剪裁畫布和根據(jù)路徑繪制文字。我們有時(shí)會(huì)用Path來描述一個(gè)圖像的輪廓，所以也會(huì)稱為輪廓線(輪廓線僅是Path的一種使用方法，兩者并不等價(jià))

廢話不多說，開始戰(zhàn)斗！?。希ā桑摺桑?/p>

使用moveTo和lineTo畫直線

首先需要定義下畫筆，和昨天的project結(jié)構(gòu)一樣：

        // 設(shè)置畫筆
        Paint mPaint = new Paint();
        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.RED);
        //抗鋸齒
        mPaint.setAntiAlias(true);
        //設(shè)置寬度
        mPaint.setStrokeWidth(20);
        // 設(shè)定畫筆填充類型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

定義好之后開始定義path：

        //獲取控件的寬高
        int width = getWidth();
        int height = getHeight();
        //移動(dòng)坐標(biāo)系
        canvas.translate(width / 2, height / 2);
        //創(chuàng)建path
        Path path = new Path();
        //移動(dòng)到開始坐標(biāo)點(diǎn)
        path.moveTo(0, 0);
        //劃線到終點(diǎn)坐標(biāo)點(diǎn)
        path.lineTo(300,300);
        // 繪制Path
        canvas.drawPath(path, mPaint);

畫出一條紅線:

image.png

運(yùn)行效果:

image.png

addCircle繪制圓

使用addCircle函數(shù)來繪制圓圈:

      // 設(shè)置畫筆
        Paint mPaint = new Paint();
        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.RED);
        //抗鋸齒
        mPaint.setAntiAlias(true);
        //設(shè)置寬度
        mPaint.setStrokeWidth(20);
        // 設(shè)定畫筆填充類型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //獲取控件的寬高
        int width = getWidth();
        int height = getHeight();
        //移動(dòng)坐標(biāo)系
        canvas.translate(width / 2, height / 2);
        //　制定路徑
        Path mPath = new Path();

        mPath.addCircle(0,0,width/4, Path.Direction.CW);

        canvas.drawPath(mPath, mPaint);

效果:

image.png

運(yùn)行結(jié)果:

image.png

接下來,做一個(gè)小練習(xí),繪制五角星.O(∩_∩)O

小練習(xí)(繪制五角星)

首先學(xué)習(xí)下繪制五角星的方法:
1.繪制一個(gè)圓
2.從這個(gè)圓中,均勻的選出五個(gè)點(diǎn),每個(gè)點(diǎn)之間的弧度差是:360/5.
3.根據(jù)筆畫依次連接這五個(gè)點(diǎn).

源碼:

package com.example.user.test11;

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

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        // 設(shè)置畫筆
        Paint mPaint = new Paint();
        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.RED);
        //抗鋸齒
        mPaint.setAntiAlias(true);
        //設(shè)置寬度
        mPaint.setStrokeWidth(20);
        // 設(shè)定畫筆填充類型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //獲取控件的寬高
        int width = getWidth();
        int height = getHeight();
        //移動(dòng)坐標(biāo)系
        canvas.translate(width / 2, height / 2);

        float radius = width / 2;

        //第一個(gè)點(diǎn)的坐標(biāo)
        float x1 = 0;
        float y1 = radius;

        //第二個(gè)點(diǎn)的坐標(biāo)
        float x2 = (float)(Math.cos(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        float y2 = (float)(Math.sin(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        //第三個(gè)點(diǎn)的坐標(biāo)
        float x3 = (float)(-(Math.cos(Math.PI / 2 - Math.PI * 2 / 5) * radius));
        float y3 = (float)(Math.sin(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        //第四個(gè)點(diǎn)的坐標(biāo)
        float x4 = (float)(-(Math.cos(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        float y4 = (float)(-(Math.sin(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        //第五個(gè)點(diǎn)的坐標(biāo)
        float x5 = (float)(Math.cos(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius);
        float y5 = (float)(-(Math.sin(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        //　制定路徑
        Path mPath = new Path();

        mPath.moveTo(x1,y1);
        mPath.lineTo(x5,y5);
        mPath.lineTo(x3,y3);
        mPath.lineTo(x2,y2);
        mPath.lineTo(x4,y4);
        mPath.lineTo(x1,y1);

        //繪制五角星
        canvas.drawPath(mPath, mPaint);
        //繪制圓
        canvas.drawCircle(0, 0, radius, mPaint);
    }

}

注意:JAVA中Math類中的三角函數(shù)參數(shù)是弧度并非數(shù)值

實(shí)現(xiàn)效果:

image.png

運(yùn)行結(jié)果:

image.png

參考

Android開發(fā)中三個(gè)繪圖工具(Paint，Canvas，Path)的基本用法（總結(jié)）
Android繪圖（2D繪圖、3D繪圖）
Android 自定義View之繪圖
Android開發(fā)--圖形圖像與動(dòng)畫（一）--Paint和Canvas類
Android開發(fā)之Path詳解