概念
路徑，可用於繪製直線，曲線構成的幾何路徑，還可用於根據路徑繪製文字。
常用API
- 移動
- 連線
- 閉合
- 添加圖形
使用
移動連線閉合的使用
新建一個類在 onDraw()方法中使用
//填充效果
// mPaint.setStyle(Paint.Style.FILL);
mPath.moveTo(100, 70); //移動
mPath.lineTo(140, 800);//連線
//等同於上一行代碼效果
// mPath.rLineTo(40,730);
mPath.lineTo(250, 600);
mPath.close();//設置曲線是否閉合
canvas.drawPath(mPath, mPaint);
所示代碼運行之後會產生如下效果
1
mPaint.setStyle(Paint.Style.FILL);
去掉 會顯示空的
2
mPath.close();//設置曲線是否閉合
去掉後
3
mPath.moveTo(100, 70); //移動
mPath.lineTo(140, 800);//連線
//等同於上一行代碼效果
// mPath.rLineTo(40,730);
從座標上可以看出 mPath.lineTo(140, 800)的x,y座標減去 mPath.moveTo(100, 70); 就爲mPath.rLineTo(40,730);的xy座標.rLineTo是相對的座標
添加子圖形addXXX
添加弧形
public void addArc (float left, float top, float right, float bottom, float startAngle, float sweepAngle)
| 參數 | |
|---|---|
| left top right bottom | 屏幕左上角爲起始點的上下左右距離 |
| startAngle | x軸爲正方向，起始繪製的角度 |
| sweepAngle | 沿着順時針的角度掃過的度數 |
代碼
1
//添加弧形
mPath.addArc(0, 0, 200, 200, 0, 90);
結果
2
//添加弧形
mPath.addArc(0, 0, 200, 200, 0, 160);
結果
3
mPath.addArc(30, 30, 200, 200, -225, 225);
結果
添加矩形
public void addRect (float left, float top, float right, float bottom, Path.Direction dir)
| 參數 | ||
|---|---|---|
| left top right bottom | 屏幕左上角爲起始點的上下左右距離 | |
| Path.Direction dir | Path.Direction | CW表示順時針方向繪製 |
| CCW表示逆時針方向 |
//Path.Direction.CW表示順時針方向繪製，CCW表示逆時針方向
mPath.addRect(500, 500, 900,900, Path.Direction.CW);
添加圓和橢圓
//添加一個圓
public void addCircle (float x, float y, float radius, Path.Direction dir)
//添加一個橢圓
public void addOval (float left, float top, float right, float bottom, Path.Direction dir)
追加圖形
public void arcTo (float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)
| 參數 | |
|---|---|
| forceMoveTo | true，繪製時移動起點，false，繪製時連接最後一個點與圓弧起點 |
代碼
1.如果forceMoveTo爲true
mPath.addArc(30, 30, 200, 200, -225, 225);
mPath.arcTo(400, 200, 600, 400, -180, 225, true);
1.如果forceMoveTo爲false
mPath.addArc(30, 30, 200, 200, -225, 225);
//改爲了false
mPath.arcTo(400, 200, 600, 400, -180, 225, false);
添加一個路徑
mPath.moveTo(100, 70);
mPath.lineTo(140, 180);
mPath.lineTo(250, 330);
mPath.lineTo(400, 630);
mPath.lineTo(100, 830);
Path newPath = new Path();
newPath.moveTo(100, 1000);
newPath.lineTo(600, 1300);
newPath.lineTo(400, 1700);
mPath.addPath(newPath);
添加圓角矩形
RectF rectF5 = new RectF(200, 800, 700, 1200);
mPath.addRoundRect(rectF5, 20, 20, Path.Direction.CCW);
貝塞爾曲線
-
貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線
-
貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。 我們將這些點簡單分爲兩類，一類是數據點，一類是控制點。
-
德卡斯特利奧算法：
一階貝塞爾曲線
沒有控制點，僅有兩個數據點（A和B）,最終效果是一條線段。
二階貝塞爾曲線
由兩個數據點（A,C），一個控制點（B）來描述曲線狀態。
三階貝塞爾曲線
由兩個數據點（A和D）,兩個控制點（B和C）來描述曲線的狀態。
參考：
維基百科英文版：
https://en.wikipedia.org/wiki/Bézier_curve
畫二階貝塞爾曲線
有一個控制點
// //畫二階貝塞爾曲線
mPath.moveTo(300, 500);
mPath.quadTo(500, 100, 800, 500);
//參數表示相對位置，等同於上面一行代碼
// mPath.rQuadTo(200, -400, 500, 0);
畫三階貝塞爾曲線
有兩個控制點
mPath.moveTo(300, 500);
// mPath.cubicTo(500, 100, 600, 1200, 800, 500);
//參數表示相對位置，等同於上面一行代碼
mPath.rCubicTo(200, -400, 300, 700, 500, 0);
