在上文中我們簡單介紹了Canvas#drawCircle()的使用方式，以及Paint#setStyle(),Paint#setStrokeWidth(),Paint#setColor()等相關函數，不知道小伙伴們了解了多少？那么是不是所有的圖形都能通過圓來描述呢？當然不行，那么熟悉API套路的我們就應該知道，這時候應該去看Canvas源碼中提供的公有方法是否能滿足我們的需求，這樣我們就會看到下表中的公有函數：

公有函數函數說明

drawBitmap	繪制圖片
drawArc	繪制圓弧
drawLine	繪制線條
drawOval	繪制橢圓
drawPoint	繪制點
drawRect	繪制矩形
drawRoundRect	繪制圓角矩形
drawText	繪制字符串

上表中大多數函數都不止一個實現，具體的參數含義也不同。激動的你們是不是已經搬好小板凳，等著我講解這些函數的用法及參數了？不好意思，要讓你們失望了，我一向秉承，授之以魚，不如授之以漁，所以親們自行嘗試這些函數哦，繪制結果老規矩，后臺等你們哦！

接下來敲黑板，開始畫重點嘍，仔細排查上表中函數，思考三角形，五角形，六角形，五角星等的繪制方法。肯定有小伙伴立刻補刀，傻不傻？畫線啊，拼起來不就好？那么問題來了，讓你畫一個紅色三角形怎么搞？三條線拼起來，Paint設置成Style.FILL能搞定？

機智的我立馬去擼了一波代碼

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawLine(10,10,200,200,mPaint); canvas.drawLine(200,200,150,200,mPaint); canvas.drawLine(150,200,10,10,mPaint); } private void init(){ mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.RED); mPaint.setStyle(Style.FILL); }復制代碼

手抖一運行，秒打臉，結果是圖-錯誤的三角

那到底要怎么整呢？Google爸爸設計API不可能沒考慮到這些東東啊？不服氣，接著搜源碼，終于找到了一個看不懂的東東：public void drawPath(@NonNull Path path, @NonNull Paint paint)復制代碼

這個Path到底是個什么東東，下面我們一起來學習下。

Path

什么是Path

Path英翻漢的結果是路徑，路途，也就是說Path代表著一段可用路徑。使用Path可以構建一個路徑對象，用于Canvas繪制，Path中的相關函數及說明我們用到一個講解一個，有興趣的小伙伴可以自行查閱嘗試，資料很多。

繪制三角形

在使用Path定義路徑時，我們首先應該為該路徑指定起點，使用Path#moveTo()方法，隨后使用其他函數繪制所需路徑即可，以開篇三角形為例，構建Path的代碼如下：

//Path對象初始化 mPath = new Path(); //移動路徑起點到（10,10） mPath.moveTo(10,10); //從點（10,10）繪制直線到點（200,200） mPath.lineTo(200,200); //從點（200,200）繪制直線到點（150,200） mPath.lineTo(150,200); //閉合該路徑，從當前點繪制直線到起點 mPath.close();復制代碼

隨后使用Canvas#drawPath繪制該路徑，代碼如下：

//第一個參數為路徑對象，第二個參數為畫筆canvas.drawPath(mPath,mPaint);復制代碼

再次運行，我們可以看到界面上有一個實心紅色三角形，如下圖：

這里請大家自行繪制五邊形，六邊形。老規矩，截圖甩后臺。

前面小試牛刀，繪制了一個小小三角形，大家對Path應該還是一知半解，接下來我們進一步學習如何使用Path描述自定義View中的不規則路徑。目標下面動圖：

咋一看，是不是一個頭兩個大，不要方，都是紙老虎，我們來一點一點分析。

動畫形成過程

仔細觀察上面動圖，我們不難發現整個圖形由四部分組成，拿出其中一部分單獨分析，我們不難得到下圖：

左上角這四分之一是由兩條直線加四分之一圓弧組成，其中動畫是由點P的位置變化形成的，P點坐標范圍起于圖1止于圖4.

Path組成及點坐標

還是以左上角四分之一做細致分析，講解Path的形成過程及點坐標，詳細的左上角坐標標記如下圖：

描述左上角的Path路徑對象偽代碼如下：

移動起點到點B,繪制四分之一圓，繪制直線AP，然后閉合該路徑即可復制代碼

進一步細化上圖中輔助點，計算我們所需要的三個關鍵點P，A，B的坐標，細化后的分析圖如下：

如上圖所示我們假設要繪制的圓半徑為R，那么可以得到P點所能取得的最大坐標值為(O-B1,O-A1)，其中O-B1=O-A1。

由于三角形OPA是等腰三角形，所以其高線P-A1=R/2,又B1-O = P-A1,所以O-B1 = R/2

進而我們可以得到P點的取值范圍為（0,0）到（R/2,R/2）.

生成Path

切換坐標系到我們的View坐標系內，假設P點坐標為（x，x）,x取值范圍為0到R/2,從而我們可以確認得到左上角路徑上的P，A，B三點坐標，其中：

A(mWidth/2,mHeight/2 - R)
B(mWidth/2 - R,mHeight/2)
P(mWidth/2 - x,mHeight/2 - x)

獲得ABP三點坐標后，接下來的重點就是怎么將四分之圓加入Path對象了，這里我們就需要用到Path#addArc()方法了,函數聲明如下：

//第一個參數為圓弧所在矩形區域，第二個參數為截圖的開始角度，第三個參數為截取的角度大小public void addArc(RectF oval, float startAngle, float sweepAngle)復制代碼

畫圖說明如下：

一點要注意第三個參數是截取得角度大小，從水平方向開始，順時針取正值，逆時針取負值

那么此時我們就可以確定左上角的Path對象了，代碼如下：

//清空上一次Path中存放的所有路徑 mPath3.reset(); //移動路徑起點到B點 mPath3.moveTo(mWidth / 2 - mRadius, mHeight / 2); //繪制四分之一圓弧BA mPath3.addArc(new RectF(mWidth / 2 - mRadius, mHeight / 2 - mRadius, mWidth / 2 + mRadius, mHeight / 2 + mRadius), 180, 90); //繪制直線AP mPath3.lineTo(mWidth / 2 - x, mHeight / 2 - x); //閉合曲線，默認繪制直線PB mPath3.close();復制代碼

生成動畫

public void startAnimation() { //新建ValueAnimator對象 mValueAnimator = ValueAnimator.ofFloat(0f, mRadius / 2f); //設置動畫單次時長 mValueAnimator.setDuration(5000); //設置動畫重復模式，REVERSE--反轉，RESTART--重新開始 mValueAnimator.setRepeatMode(ValueAnimator.REVERSE); //設置動畫重復次數，-1 --- INFINE mValueAnimator.setRepeatCount(-1); mValueAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { //更新P點坐標 x = (float) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.start(); }復制代碼

運行后效果如下：

作業

上面已經詳細解釋了左上角的繪制過程，相信機智的你已經完全懂了，那么請自行完成剩余三部分的繪制，交流群里gif甩起來。

下期預告

提前透漏個動畫給你們。還是在圓上搞事情，感覺和圓杠上了。

完整代碼

public class ArcView extends View { private Paint mPathPaint; private Path mPath; private int mWidth; private int mHeight; private int mRadius = 200; private ValueAnimator mValueAnimator; private float x = 0f; public ArcView(Context context) { super(context); init(); } public ArcView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (w > 0 && h > 0) { mWidth = w; mHeight = h; } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); initPaths(); mPathPaint.setColor(Color.parseColor("#FD9A59")); canvas.drawPath(mPath, mPathPaint); } private void init() { mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPathPaint.setStyle(Style.FILL); mPath = new Path(); } private void initPaths() { mPath.reset(); mPath.moveTo(mWidth / 2 - mRadius, mHeight / 2); mPath.addArc(new RectF(mWidth / 2 - mRadius, mHeight / 2 - mRadius, mWidth / 2 + mRadius, mHeight / 2 + mRadius), 180, 90); mPath.lineTo(mWidth / 2 - x, mHeight / 2 - x); mPath.close(); } public void startAnimation() { mValueAnimator = ValueAnimator.ofFloat(0f, mRadius / 2f); mValueAnimator.setDuration(5000); mValueAnimator.setRepeatMode(ValueAnimator.REVERSE); mValueAnimator.setRepeatCount(-1); mValueAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { x = (float) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.start(); }}復制代碼

覺得不錯的親們動動手指分享轉發下哈。

轉載于:https://juejin.im/post/5bc85103e51d450e925290d3

總結

以上是生活随笔為你收集整理的View详解（4）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。