一.Canvas簡(jiǎn)介

Canvas我們可以稱(chēng)之為畫(huà)布，能夠在上面繪制各種東西，是安卓平臺(tái)2D圖形繪制的基礎(chǔ)，非常強(qiáng)大。

二.Canvas的常用操作

三.Canvas詳解

繪制顏色

繪制顏色是填充整個(gè)畫(huà)布，常用于繪制底色。

  @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.drawColor(Color.RED); //繪制紅色
    }

a.jpg

創(chuàng)建畫(huà)筆

要想繪制內(nèi)容，首先需要先創(chuàng)建一個(gè)畫(huà)筆，如下：

   //創(chuàng)建畫(huà)筆
   private Paint mPaint = new Paint();

   /**
     * 初始化一些的內(nèi)容，和獲取自定義屬性。
     * @param context
     * @param attrs
     */

    public CustomView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        //初始化畫(huà)筆
        initPaint();
    }

    private void initPaint()
    {
        //設(shè)置畫(huà)筆顏色
        mPaint.setColor(Color.RED);
        //設(shè)置畫(huà)筆模式
        mPaint.setStyle(Paint.Style.FILL);
        //設(shè)置畫(huà)筆寬度
        mPaint.setStrokeWidth(10f);
        //設(shè)置抗鋸齒
        mPaint.setAntiAlias(true);
    }

繪制點(diǎn)

可以繪制一個(gè)點(diǎn)，也可以繪制一組點(diǎn)，如下：

  @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.drawColor(Color.RED); //繪制紅色
        //在坐標(biāo)（350,400處畫(huà)一個(gè)點(diǎn)
        canvas.drawPoint(350,400,mPaint);
        canvas.drawPoint(300,400,mPaint);
        //畫(huà)多個(gè)點(diǎn)
        canvas.drawPoints(new float[]{400,400,400,500,400,600,400,700,400,800,400,900},mPaint);
    }

b.jpg

繪制直線

繪制直線需要兩個(gè)點(diǎn)，初始點(diǎn)和結(jié)束點(diǎn)，同樣繪制直線也可以繪制一條或者繪制一組

        //在坐標(biāo)（100,100）和（600,100）之間畫(huà)一條線
        canvas.drawLine(100,100,600,100,mPaint);
        //畫(huà)多條線
        canvas.drawLines(new float[]{100,150,600,150,100,200,600,200,100,250,600,250},mPaint);

c.jpg

繪制矩形

確定確定一個(gè)矩形最少需要四個(gè)數(shù)據(jù)，就是對(duì)角線的兩個(gè)點(diǎn)的坐標(biāo)值，這里一般采用左上角和右下角的兩個(gè)點(diǎn)的坐標(biāo)。

// 第一種
canvas.drawRect(100,100,800,400,mPaint);

// 第二種
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);

// 第三種
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);

注:Rect和RectF兩者最大的區(qū)別就是精度不同，Rect是int(整形)的，而RectF是float(單精度浮點(diǎn)型)的。

d.jpg

繪制圓角矩形

   //繪制圓角矩形
   RectF rectF = new RectF(100,100,600,300);
   canvas.drawRoundRect(rectF,20,20,mPaint);

e.jpg

繪制橢圓

相對(duì)于繪制圓角矩形，繪制橢圓就簡(jiǎn)單的多了，因?yàn)樗恍枰粋€(gè)矩形矩形作為參數(shù)

  //繪制橢圓
  RectF rectF = new RectF(100,100,600,400);
  canvas.drawOval(rectF,mPaint);

f.jpg

繪制圓

    // 繪制一個(gè)圓心坐標(biāo)在(360,400)，半徑為300 的圓。
    canvas.drawCircle(360,400,300,mPaint);

g.jpg

繪制圓弧

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint){}

從上面可以看出，相比于繪制橢圓，繪制圓弧還多了三個(gè)參數(shù)：

//開(kāi)始角度
startAngle  
//掃過(guò)角度
sweepAngle  
//是否使用中心
useCenter   

直接上代碼：

        RectF rectF = new RectF(100,100,600,600);
        // 繪制背景矩形
        mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF,mPaint);
        // 繪制圓弧(不使用中心點(diǎn))
        mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF,0,90,false,mPaint);
        

        RectF rectF1 = new RectF(100,700,600,1200);
        // 繪制背景矩形
        mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF1,mPaint);
        // 繪制圓弧(使用中心點(diǎn))
        mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF1,0,90,true,mPaint);

h.jpg

四.Paint介紹

如果我們想繪制一個(gè)圓，只要邊不要里面的顏色怎么辦？

很簡(jiǎn)單，繪制的基本形狀由Canvas確定，但繪制出來(lái)的顏色,具體效果則由Paint確定。

我們可以給Paint設(shè)置style

//設(shè)置畫(huà)筆模式為填充
mPaint.setStyle(Paint.Style.FILL);  

參考文章

@GcsSloop:安卓自定義View進(jìn)階-Canvas之繪制圖形