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當然會提供對應的方法。

Path部分路徑截取函數對照說明表：

函數名函數說明備注

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方法的使用。

查看下圖，是一個八卦圖，為了更好的說明問題，我在圖上添加了輔助坐標系和點：

從圖上我們可以將該圖簡單分為四部分，黑色小圓M，白色小圓N，以及曲線ABOA(即白色陰陽魚區域)，曲線BAOB(即黑色陰陽魚區域).

進一步在上圖中添加輔助點和輔助曲線，我們可以看到，白色陰陽魚實際上是由半圓BFA，半圓AEO及半圓BDO的圓周曲線所圍成，同理黑色陰陽魚是由半圓AGB，半圓BDO，及半圓OEA的圓周圍成。

假設我們以View寬度(在onDraw函數內可以通過getWidth(),getHeight()獲取View的可見寬高)為大圓O直徑，那么圓M及圓N直徑就為getWidth()/2。

圓O的外接矩形頂點為：

左上頂點：(0,0)，右下頂點：(getWidth(),getHeight())

圓M的外接矩形頂點為：

左上頂點：(getWidth()/4,),右下頂點：(getWidth()*3/4,getWidth()/2)

圓N的外接矩形頂點為：

左上頂點：(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八卦圖繪制

往期推薦

View繪制系列(1)-View簡介

OpenCV SDK下載及Android Java環境搭建

玩轉花式Loading

總結

以上是生活随笔為你收集整理的canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

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