Canvas貝塞爾曲線繪製
寧從直中來，不從曲中求，雖然直線應用不少，但曲線亦然。在Path類說明的部分，咱們就聊到其主要做用是用來描述直線段，二次曲線及三次曲線所組成的複合幾何路徑，在前面咱們已經瞭解到了直線段組合的描述方法而且進行了簡單應用，接下來一塊兒來看下曲線的複合路徑描述。web
貝塞爾曲線簡介
在正式編碼前，咱們首先來了解下什麼是貝塞爾曲線，貝塞爾曲線由起始點，終點及控制點三種元素構成，經過改變控制點的位置，貝塞爾曲線的形狀會發生變化。canvas
以二階貝塞爾曲線爲例說明曲線造成過程：c#
步驟一：在平面內選三個不一樣的點並依次鏈接，以下圖所示：微信
步驟二：在AB及BC線段上分別尋找點D和E，使得AD/AB = CE/CB，以下圖：ide
DE
，在
DE
上尋找點
F
，使得
DF
/
DE
=
AD
/
AB
=
BE
/
BC
，以下圖：
P0
，
P1
，
P2
這三個點座標便可，其中
P1
被稱爲控制點。
二階貝塞爾曲線繪製
咱們以OFO App裏面的黃色背景，爲你們演示下二階貝塞爾曲線的繪製函數
BC
爲
View
寬度，能夠經過
getRight()
-
getLeft()
獲得，
View
高度能夠經過
getBottom()
-
getTop()
得到，取
A‘
位於
View
高度的十分之一處，則
A'
的座標爲(
getLeft()
,
getTop()
+(
View
高度)/10),同理
D‘
座標爲(
getLeft()
+(
View
寬度),
getTop()
+(
View
高度)/10),取
BC
中線與
AD
交點上
View
高度十分之一處爲控制點，則控制點座標爲(
getLeft()``+View
寬度/2,
getTop()
-
View
高度/10),進而咱們能夠獲得繪製代碼以下：
Path path = new Path();
//選取整個View的寬高繪製背景
path.moveTo(getLeft(), getTop()+(getBottom()-getTop())/10);
//繪製A'D'，控制點在AD平分線上，quadTo函數的前兩個值爲控制點的x，y座標，後兩個值爲終點座標
path.quadTo(getLeft()+(getRight()-getLeft())/2 , getTop()-(getBottom()-getTop())/10,getRight() , getTop()+(getBottom()-getTop())/10);
//繪製D'C
path.lineTo(getRight(), getBottom());
//繪製CB
path.lineTo(getLeft(), getBottom());
//閉合曲線，自動繪製BA'
path.close();
運行後效果：flex
View
寬高的方法，因此暫時用已知方法獲取數據。
三階貝塞爾曲線繪製
三階貝塞爾曲線有兩個控制點，咱們取(0,0)點爲起點，(600,500)爲終點，(100,500)和(600,50)爲控制點，繪製一條貝塞爾曲線，代碼以下：編碼
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path path = new Path();
path.cubicTo(100,500,600,50,600,500);
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(20);
canvas.drawPath(path,paint);
}
運行效果：url
往期推薦spa
本文分享自微信公衆號 - 小海編碼日記（gh_1f87b8c00ede）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。