一個蛋搞懂canvas.drawArc()

MisterBlank發表於2020-04-05
Canvas

egg

Android 中的canvas有很多方法，畫圓，畫長方形，畫橢圓型，那麼如果讓你畫個蛋，你會怎麼做呢。

  • 可能你會說drawOval，但是你看這個蛋它明顯一頭尖一頭圓嘛，所以我的思路就是使用drawArc。

思路如下：

  • 把圓看成兩半
    • 一半用drawArc畫半圓，畫筆設定為填充
    • 另一半drawArc畫橢圓，畫筆設定為填充
    • 兩個半圓拼在一起，噹噹噹當雞蛋的形狀出現了！

囉嗦這麼多，進入正題看一下drawArc方法

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

複製程式碼
  • 分別需要5個引數，那它們分別代表什麼意思呢？
    • oval：為確定圓弧區域的矩形，圓弧的中心點為矩形的中心點
    • startAngle：為圓弧的開始角度（時鐘3點的方向為0度，順時鐘方向為正）
    • sweepAngle：為圓弧的掃過角度（正數為順時鐘方向，負數為逆時鐘方向）
    • useCenter：表示繪製的圓弧是否與中心點連線成閉合區域
    • paint：paint為繪製圓弧的畫筆

擼碼環節

  • ①初始化畫筆
    /**
     * 畫筆顏色值
     */
    public static final int COLOR_STOCK = Color.parseColor("#F5DEB3");
    //抗鋸齒
   mEggPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    //畫筆樣式填充        
  mEggPaint.setStyle(Paint.Style.FILL);
  mEggPaint.setColor(COLOR_STOCK);
  //開啟抗鋸齒
  mEggPaint.setAntiAlias(true);
  //開啟防抖動
  mEggPaint.setDither(true);
複製程式碼
  • ②獲取中心點
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        //獲取畫布的寬度
        float canvasWidth = right - left;
        //獲取畫布的高度
        float canvasHeight = bottom - top;
        //除以二得到中間值
        float x = canvasWidth / 2;
        float y = canvasHeight / 2;
        float r = canvasWidth / 2;
        mX = x;
        mY = y;
        mR = r;
    }
複製程式碼
  • 畫蛋
  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //上半圓長方形Y方向設定比下半圓長凸顯橢圓弧
        RectF ovalTop = new RectF(mX-mR, mY-mR-100, mX+mR, mY+mR+100);
        //從9點鐘方向順時針畫弧線180度未與中心點閉合，畫筆模式為填充
        canvas.drawArc(ovalTop, 180, 180, false, mEggPaint);

       //下半圓長方形半圓弧
        RectF oval3 = new RectF(mX-mR, mY-mR, mX+mR, mY+mR);
     //從3點鐘方向順時針畫弧線180度未與中心點閉合，畫筆模式為填充
        canvas.drawArc(oval3, 0, 180, false, mEggPaint);
    }
複製程式碼
  • 效果圖
    • 我這裡佈局寫的寬高為100dp和200dp畢竟蛋是長方形嘛。
      效果圖

注意如果是四個半圓畫蛋的話第四個引數要設定為true，否則你畫蛋中間將是空心的

好了，到這裡蛋畫好了drawArc你會了嗎，當然我只是簡單的舉一個例子，建議分成四個半弧去畫蛋，五個引數你需要自己去嘗試一下，才能更充分地理解他們的作用，篇幅有限就不囉嗦了！

相關文章