Canvas八卦圖繪制

前面我們已經(jīng)學(xué)習(xí)了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)方法的使用，但并不是所有的曲線所有的曲線都需要用貝塞爾曲線來描述，畢竟在沒有專業(yè)軟件輔助的情況下，確認(rèn)控制點也是一件很復(fù)雜的事情，比如說我們閉合曲線中包含一段橢圓弧或者圓弧，抑或者圓角矩形，我們該怎么做呢？作為描述組合路徑的核心類，Path當(dāng)然會提供對應(yīng)的方法。

Path部分路徑截取函數(shù)對照說明表：

函數(shù)名函數(shù)說明備注

addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle)	添加以(left,top)為左上頂點，(right,bottom)為右下頂點矩形的內(nèi)切橢圓中，以startAngle角度起始，劃過sweepAngle角度后所得到的弧	注意：這里傳入的startAngle及sweepAngle單位均為角度，sweepAngle順時針為正值，逆時針為負(fù)值
addArc(RectF oval, float startAngle, float sweepAngle)	同上，只是將矩形的描述方式改成了RectF類對象描述	同上
addCircle(float x, float y, float radius, Direction dir)	添加一個圓到Path路徑中，dir說明環(huán)繞圓周方向	其中dir取值Direction.CW為順時鐘，Direction.CCW為逆時針
addOval(float left, float top, float right, float bottom, Direction dir)	添加一個橢圓到路徑中，橢圓是以(left,top)為左上頂點，(right, bottom)為右下頂點矩形的內(nèi)切橢圓，dir說明環(huán)繞方向	同上
addRect(float left, float top, float right, float bottom, Direction dir)	添加以(left,top)為左上頂點，(right, bottom)為右下頂點的矩形，dir說明環(huán)繞方向	同上
addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir)	添加以(left,top)為左上頂點，(right, bottom)為右下頂點，以rx，ry為圓角度的圓角矩形，dir說明環(huán)繞方向	同上
arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)	添加以(left,top)為左上頂點，(right,bottom)為右下頂點矩形的內(nèi)切橢圓中，以startAngle角度起始，劃過sweepAngle角度后所得到的弧，forceMoveTo是否強(qiáng)制修正路徑起點，如果為true，相當(dāng)于執(zhí)行Path.moveTo(startAngle對應(yīng)坐標(biāo))，隨后arcTo	注意：這里傳入的startAngle及sweepAngle單位均為角度，sweepAngle順時針為正值，逆時針為負(fù)值

添加整個圖形路徑的函數(shù)原型比較簡單，大家自行嘗試使用下，這里我們重點演示下addArc方法的使用。

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

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

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

假設(shè)我們以View寬度(在onDraw函數(shù)內(nèi)可以通過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())

那么左側(cè)白色陰陽魚的路徑為：

Path?leftDiagramPath?=?new?Path();
//添加圓O的左側(cè)半圓BFA所在的圓周
leftDiagramPath.addArc(0,0,getWidth(),getWidth(),90,180);
//添加圓M的右側(cè)半圓AEO所在的圓周，起始角度負(fù)90，以水平X正向為0度
leftDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);
//添加圓N的左側(cè)半圓ODB所在的圓周，起始角度負(fù)90，以水平X正向為0度
leftDiagramPath.addArc(getWidth()/4,getWidth()/2,getWidth()*3/4,getWidth(),-90,-180);

右側(cè)黑色陰陽魚的路徑為：

Path?rightDiagramPath?=?new?Path();
//添加圓O的右側(cè)半圓BGA所在的圓周
rightDiagramPath.addArc(0,0,getWidth(),getWidth(),90,-180);
//添加圓M的右側(cè)半圓AEO所在的圓周，起始角度負(fù)90，以水平X正向為0度
rightDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);
//添加圓N的左側(cè)半圓ODB所在的圓周，起始角度負(fù)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);

先調(diào)用canvas.drawPath(@NonNull Path path, @NonNull Paint paint)繪制陰陽魚，隨后繪制兩個小圓，運(yùn)行效果如下：

這里我在onDraw函數(shù)剛開始使用canvas.drawColor(Color.GREY)為頁面繪制了灰色背景。

完整代碼參見附錄_Canvas八卦圖繪制

往期推薦

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

OpenCV SDK下載及Android Java環(huán)境搭建

玩轉(zhuǎn)花式Loading

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。