Android 自定义View —— Path
Path 的概念:
Path類封裝由直線段,二次曲線和三次曲線組成的復合(多個輪廓)幾何路徑。可以使用canvas.drawPath(path,paint)對其進行填充或描邊繪制(基于Paint的Style),也可以用于剪切或在路徑上繪制文本
Path 的使用也就是上一篇canvas 里面沒有說的drawPath方法
(1)lineTo、rLineTo? 繪制線? (注意很多方法都有不帶r與帶r 我也寫了2邊它們的區別,不帶r的)
(2)moveTo、rMoveTo 修改起始點位置
(3)setLastPoint 修改最后點的位置(假如豎線的長度本想想畫400長度結果為了600的長度,這個時候可以使用該方法修改)
?下面說一些添加圖形的方法在說之前先說下Path.Direction方法
Path.Direction.CW 順時針繪制,Path.Direction.CCW 逆時針繪制 ,了解這個在看下面的常規圖形方法(為了更好的理解可以看案例9 的效果圖以及代碼給出順時針和逆時針的效果圖)
? (4)? addRect 繪制矩形(長方形和正方形)
? (5)? addCircle 繪制圓形
(6)addOval 繪制橢圓
(7)addRoundRect 繪制圓角矩形
(8)addArc 繪制圓弧
(9)drawTextOnPath??設置決定了文本沿著路徑的起始位置
(10)close? 閉合path
(11)setFillType?設置路徑的填充類型
? (12)?quadTo 和cubicTo 貝塞爾曲線 (這個之前項目中寫過水滴的效果等有空在整理下)
1 lineTo、rLineTo? 繪制線? (注意很多方法都有不帶r與帶r 我也寫了2邊它們的區別,不帶r的)
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.lineTo(200, 400);// 繪制線canvas.drawPath(path, paint); 
效果圖
在繪制一些折線如下
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.lineTo(200, 400);path.lineTo(300, 100);path.lineTo(400, 400);path.lineTo(500, 50);path.lineTo(600, 400);path.lineTo(700, 100);path.lineTo(800, 400);// 繪制線canvas.drawPath(path, paint); 
效果圖如下
2?moveTo、rMoveTo 修改起始點位置(由于lineTo 默認其實點為0.0 如果不想從默認點開始需要借助?moveTo、rMoveTo)
?下面會一條豎線代碼如下
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.moveTo(200,200);path.lineTo(200, 400);// 繪制線canvas.drawPath(path, paint); 
效果圖
3?setLastPoint 修改最后點的位置(假如豎線的長度本想想畫400長度結果為了600的長度,這個時候可以使用該方法修改)
     paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.moveTo(200,200);// 和path.lineTo(200, 400); 長度一樣path.lineTo(200, 600);path.setLastPoint(200,400); 
效果圖如下
4? addRect 矩形
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個矩形path.addRect(100,200, 600, 500,Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
或者
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個矩形RectF rect = new RectF();rect.left = 100;rect.top = 200;rect.right = 600;rect.bottom = 500;path.addRect(rect,Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
?效果圖如下
5?addCircle 圓形
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個圓path.addCircle(500, 500, 300, Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
效果圖如下
6?addOval 橢圓
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個圓path.addOval(100,200, 600, 500,Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
或者
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個圓RectF rect = new RectF();rect.left = 100;rect.top = 200;rect.right = 600;rect.bottom = 500;path.addRect(rect, Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
效果圖如下
7
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.addRoundRect(100,200,600,500,100,200, Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
?或者
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();// 設置一個圓RectF rect = new RectF();rect.left = 100;rect.top = 200;rect.right = 600;rect.bottom = 500;path.addRoundRect(rect,100,200, Path.Direction.CW);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
8?addArc 繪制圓弧
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();path.addArc(100,200,600,500,0,270);// 繪制canvas.drawPath(path, paint); 
或者
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setStrokeWidth(10f);Path path = new Path();RectF rect = new RectF();rect.left = 100;rect.top = 200;rect.right = 600;rect.bottom = 500;path.addArc(rect, 0, 270);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
?
9 drawTextOnPath??設置決定了文本沿著路徑的起始位置
Path.Direction.CW代碼如下
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 400, Path.Direction.CW);canvas.drawTextOnPath("期待是心痛的根源,心不動,則不痛。", path, 0, 0, paint);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
Path.Direction.CCW代碼如下
paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 400, Path.Direction.CCW);canvas.drawTextOnPath("期待是心痛的根源,心不動,則不痛。", path, 0, 0, paint);// 繪制canvas.drawPath(path, paint); 
效果圖如下
下面在繪制一個正方形的
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();RectF rect = new RectF();rect.left = 100;rect.top = 200;rect.right = 600;rect.bottom = 500;path.addRect(rect, Path.Direction.CW);canvas.drawTextOnPath("期待是心痛的根源,心不動,則不痛。", path, 0, 0, paint);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
10 close 閉合
?現在畫一個豎線和橫線如下
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.moveTo(300, 300);path.lineTo(300, 700);path.lineTo(700, 700);// 繪制canvas.drawPath(path, paint); 
xiaoguo圖如下
使用閉合方法
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.moveTo(300, 300);path.lineTo(300, 700);path.lineTo(700, 700);path.close();// 繪制canvas.drawPath(path, paint); 
效果圖如下:
11?setFillType?設置路徑的填充類型, (下面的基本沒用過簡單的了解下)
里面有四種類型?WINDING,EVEN_ODD,INVERSE_WINDING,INVERSE_EVEN_ODD
WINDING 是默認類型,指定“內部”由有符號邊交叉的非零和計算
EVEN_ODD?指定“內部”由奇數個邊交叉計算 ,---個人理解就是交叉本分
INVERSE_WINDING 與{@link#WINDING}相同,但繪制在路徑外部,而不是內部,---個人理解就是繪制畫圖之外的區域
INVERSE_EVEN_ODD 與{@link#偶數奇數}相同,但繪制在路徑外部,而不是內部--個人理解就是交叉也之外的區域
下面畫2個有交叉的圓看看效果
11.1?WINDING (默認部分)
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.STROKE);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 300, Path.Direction.CW);path.addCircle(700, 700, 300, Path.Direction.CW);path.setFillType(Path.FillType.WINDING);// 繪制canvas.drawPath(path, paint); 
效果圖如下(感覺和不添加效果一樣) 
 
11.2?INVERSE_WINDING?
 paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.FILL);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 300, Path.Direction.CW);path.addCircle(700, 700, 300, Path.Direction.CW);path.setFillType(Path.FillType.WINDING);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
?
11.3?INVERSE_WINDING
  paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.FILL);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 300, Path.Direction.CW);path.addCircle(700, 700, 300, Path.Direction.CW);path.setFillType(Path.FillType.INVERSE_WINDING);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
11.4 INVERSE_EVEN_ODD
    paint.setAntiAlias(true);// 設置畫筆的style (Paint.Style.FILL填充,Paint.Style.STROKE描邊,Paint.Style.FILL_AND_STROKE填充加描邊  )paint.setStyle(Paint.Style.FILL);// 設置畫筆的顏色paint.setColor(Color.RED);//設置描邊寬度paint.setTextSize(100);paint.setStrokeWidth(5f);Path path = new Path();path.addCircle(500, 500, 300, Path.Direction.CW);path.addCircle(700, 700, 300, Path.Direction.CW);path.setFillType(Path.FillType.INVERSE_EVEN_ODD);// 繪制canvas.drawPath(path, paint); 
效果圖如下:
總結
以上是生活随笔為你收集整理的Android 自定义View —— Path的全部內容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: Android 自定义 —— View
 - 下一篇: 韩语中再见有几种说法