Canvas八卦圖繪製
前面咱們已經學習了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)方法的使用，但並非全部的曲線全部的曲線都須要用貝塞爾曲線來描述，畢竟在沒有專業軟件輔助的狀況下，確認控制點也是一件很複雜的事情，好比說咱們閉合曲線中包含一段橢圓弧或者圓弧，抑或者圓角矩形，咱們該怎麼作呢？做爲描述組合路徑的核心類，Path固然會提供對應的方法。web
Path部分路徑截取函數對照說明表：canvas
| 函數名 | 函數說明 | 備註 |
|---|---|---|
addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle) |
添加以(left,top)爲左上頂點，(right,bottom)爲右下頂點矩形的內切橢圓中，以startAngle角度起始，劃過sweepAngle角度後所獲得的弧 |
注意：這裏傳入的startAngle及sweepAngle單位均爲角度，sweepAngle順時針爲正值，逆時針爲負值 |
addArc(RectF oval, float startAngle, float sweepAngle) |
同上，只是將矩形的描述方式改爲了RectF類對象描述 |
同上 |
addCircle(float x, float y, float radius, Direction dir) |
添加一個圓到Path路徑中，dir說明環繞圓周方向 |
其中dir取值Direction.CW爲順時鐘，Direction.CCW爲逆時針 |
addOval(float left, float top, float right, float bottom, Direction dir) |
添加一個橢圓到路徑中，橢圓是以(left,top)爲左上頂點，(right, bottom)爲右下頂點矩形的內切橢圓，dir說明環繞方向 |
同上 |
addRect(float left, float top, float right, float bottom, Direction dir) |
添加以(left,top)爲左上頂點，(right, bottom)爲右下頂點的矩形，dir說明環繞方向 |
同上 |
addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir) |
添加以(left,top)爲左上頂點，(right, bottom)爲右下頂點，以rx，ry爲圓角度的圓角矩形，dir說明環繞方向 |
同上 |
arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) |
添加以(left,top)爲左上頂點，(right,bottom)爲右下頂點矩形的內切橢圓中，以startAngle角度起始，劃過sweepAngle角度後所獲得的弧，forceMoveTo是否強制修正路徑起點，若是爲true，至關於執行Path.moveTo(startAngle對應座標)，隨後arcTo |
注意：這裏傳入的startAngle及sweepAngle單位均爲角度，sweepAngle順時針爲正值，逆時針爲負值 |
添加整個圖形路徑的函數原型比較簡單，你們自行嘗試使用下，這裏咱們重點演示下addArc方法的使用。c#
查看下圖，是一個八卦圖，爲了更好的說明問題，我在圖上添加了輔助座標系和點：微信
假設咱們以View寬度(在onDraw函數內能夠經過getWidth(),getHeight()獲取View的可見寬高)爲大圓O直徑，那麼圓M及圓N直徑就爲getWidth()/2。函數
圓O的外接矩形頂點爲：學習
左上頂點：(0,0)，右下頂點：(getWidth(),getHeight())flex
圓M的外接矩形頂點爲：編碼
左上頂點：(getWidth()/4,),右下頂點：(getWidth()*3/4,getWidth()/2)url
圓N的外接矩形頂點爲：spa
左上頂點：(getWidth()/4,getWidth()/2),右下頂點：(getWidth()*3/4,getWidth())
那麼左側白色陰陽魚的路徑爲：
Path leftDiagramPath = new Path();
//添加圓O的左側半圓BFA所在的圓周
leftDiagramPath.addArc(0,0,getWidth(),getWidth(),90,180);
//添加圓M的右側半圓AEO所在的圓周，起始角度負90，以水平X正向爲0度
leftDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);
//添加圓N的左側半圓ODB所在的圓周，起始角度負90，以水平X正向爲0度
leftDiagramPath.addArc(getWidth()/4,getWidth()/2,getWidth()*3/4,getWidth(),-90,-180);
右側黑色陰陽魚的路徑爲：
Path rightDiagramPath = new Path();
//添加圓O的右側半圓BGA所在的圓周
rightDiagramPath.addArc(0,0,getWidth(),getWidth(),90,-180);
//添加圓M的右側半圓AEO所在的圓周，起始角度負90，以水平X正向爲0度
rightDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);
//添加圓N的左側半圓ODB所在的圓周，起始角度負90，以水平X正向爲0度
rightDiagramPath.addArc(getWidth()/4,getWidth()/2,getWidth()*3/4,getWidth(),-90,-180);
兩個小圓的繪製代碼，取半徑爲100:
//上面的黑色小圓圓心
Point topCircleCenter = new Point(getWidth()/2,getWidth()/4);
//下面的白色小圓圓心
Point bottomCircleCenter = new Point(getWidth()/2,getWidth()*3/4);
//小圓半徑
float smallerCircleRadius = 100;
canvas.drawCircle(topCircleCenter.x,topCircleCenter.y,smallerCircleRadius,paint);
canvas.drawCircle(bottomCircleCenter.x,bottomCircleCenter.y,smallerCircleRadius,paint);
先調用canvas.drawPath(@NonNull Path path, @NonNull Paint paint)繪製陰陽魚，隨後繪製兩個小圓，運行效果以下：
onDraw
函數剛開始使用
canvas.drawColor(Color.GREY)
爲頁面繪製了灰色背景。
完整代碼參見附錄_Canvas八卦圖繪製
往期推薦
本文分享自微信公衆號 - 小海編碼日記（gh_1f87b8c00ede）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。