路徑跟蹤 PathMeasure的簡單使用

　　平時用path畫一些簡單的幾何圖形，呈現的時候也是已經繪製好的圖形，想一想，若是像動畫同樣看到它的繪製軌跡，是否是更酷？今天介紹的這個類PathMeasure就是幹這個的，知道它的存在仍是因爲看了啓艦寫的的自定義控件那本書。好，進入正題。

　　先說說Path,當你設置畫筆是描邊模式時，你繪製的Path能夠看作一條條接二連三的線段首尾相連。當你設置畫筆是填充模式時，你繪製一個起點和終點，path是繪製不出來的（除非你繪製3個點）。因此在使用路徑跟蹤的前提，先把畫筆設爲描邊模式，由於畫筆默認的樣式是填充模式，這是第一個注意事項。在使用PathMeasure時，對它的理解越簡單通透，你就會知道，用它須要準備哪些變量，變量所有初始完畢，用起來就像照葫蘆畫瓢同樣簡單！

　　PathMeasure和一個你繪製好的完整path綁定，而後，你能夠隨意設置起點和終點，獲得兩點之間的path，獲得這個path怎麼用呢，你是否是會這麼想：我有一條線段，分紅10等份，我每次更正起點和終點，取0-1，1-2，2-3...這些片斷路徑來繪製！不用那麼麻煩的，你能夠直接把起點固定爲0，逐漸修正終點，這樣你會獲得0-1,0-2,0-3...的path。而後交給canvas去繪製就好了，由於canvas在3個10毫秒分別繪製0-1，0-2，0-3，它看起來就是30毫秒內從0-3的完整軌跡。這個過程就相似scrollTo。接下來，看看經常使用的3個方法：

   public PathMeasure(Path path, boolean forceClosed) { // The native implementation does not copy the path, prevent it from being GC'd
        mPath = path; native_instance = native_create(path != null ? path.readOnlyNI() : 0, forceClosed); }

 

1.第一個參數就是你要跟蹤的path，第二個參數強制關閉，表示是否把你傳入的第一個path當作全封閉路徑處理。舉個例子：

假如pathMeasure傳的第一個path，是用3條線段繪製的，如左圖，每段長爲50px，那麼pathMeasure構造方法的forceClose爲true時，它把你的傳入的path當作全封閉路徑處理，也就是當初第二張圖，這時pathMeasure.genLength()獲取的路徑就是50*4；若是forceClose設爲false，那麼它仍是當作path原始的路徑，該幾條線就幾條線，pathMeasure獲取的路徑長就是50*3。因此，建議構造的pathMeasure，直接設爲false，保持原始路徑的模樣。

　　第二個方法就是最經常使用的截取一段path的方法：

public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) 

 

　　前兩個參數一目瞭然，很少介紹，有意思的是後面兩位。第3個dst，就是用來接收截取完以後的desPath，第4個參數的true和false，將直接影響desPath。考慮一下這種狀況，假如desPath初始化時就已經添加了一段路徑，如（0，0）到（50,50），這是一條斜線。那麼以後getSegment方法走完，desPath新增的截取path的起點和終點分別爲(100,0)和（100,100)，新path怎麼個添加法呢？這就是startWithMoveTo（）這個方法決定的，它爲true：好，繪製完（0,0）到（50,50）以後，系統幫你調一次moveTo(x,y)，繪製起點直接挪到截取path的起點上，如左圖。若是爲false：繪製完（0,0）到（50,50）以後，系統幫你調一次lineTo（x,y）,把最開始的path尾巴和我新截取的path頭給首尾相連，如右圖。說的已經很詳細了，再來張手繪圖，應該一目瞭然了。

　　第3個方法很簡單的，它的做用就是切換路徑輪廓，假如我畫了一個圓，我下一條路徑在圓裏面，可不是在圓周上，怎麼辦，調它就好了，此時你會發現pathMeasure.getLength()也會重置爲你新路徑輪廓的長度.

public boolean nextContour()

 

　　方法講完，實戰寫個看看。這裏我畫的仍是從書裏看的那個支付完成控件，由於我就是看懂了這個控件，才逐漸能畫出五角星，搜索框這樣的圖標。因此，我仍是願意把啓艦寫的這個簡單卻又涉及全面的例子再分享給你們。這裏上傳的是靜態圖，其實是動態的，本身寫個demo能夠看到繪製過程。

 

 

public class AiliPayView extends View { private Paint paint; private Path path,desPath; private PathMeasure pathMeasure; private ValueAnimator valueAnimator; private float curValue; private boolean isNext = false; public AiliPayView(Context context) { super(context); init(); } public AiliPayView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public AiliPayView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init(){ setLayerType(LAYER_TYPE_SOFTWARE, null); paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setStrokeWidth(8); paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.BLACK); path = new Path(); desPath = new Path(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); path.addCircle(w/2,h/2,w/2-4, Path.Direction.CW); path.moveTo(w/4,h/2); path.lineTo(w/2,h/4*3); path.lineTo(w/4*3,h/4); pathMeasure = new PathMeasure(path, false); valueAnimator = ValueAnimator.ofFloat(0,2); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { curValue = (float) animation.getAnimatedValue(); invalidate(); } }); valueAnimator.setDuration(3000); valueAnimator.start(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (curValue < 1){ float stop = pathMeasure.getLength() * curValue; pathMeasure.getSegment(0,stop,desPath,true); }else { if (!isNext){ isNext = true; //這裏是臨界狀態，getlength是圓的總長
                pathMeasure.getSegment(0, pathMeasure.getLength(), desPath, true); //路徑輪廓切換
 pathMeasure.nextContour(); }else { //getlength是新輪廓的總長，還有true的設置，由於折線路徑在圓裏面，因此把繪製起點更換，不然，折線的起點和圓又會連起來

                float stop = pathMeasure.getLength() * (curValue - 1); pathMeasure.getSegment(0, stop, desPath, true); } } canvas.drawPath(desPath,paint); } }

 

代碼中有些細節值得注意：

　　1.在獲取中畫圓時，圓心選取沒什麼問題，半徑的設置可能須要根據長寬不一致，進一步的確認，我這裏默認長寬是相等的寫法。另外，我設置的圓半徑爲w/2-4，爲何要減4呢？由於畫筆的描邊寬度我設置的是8，當我不減去畫筆寬度的一半時，你能夠發現最終的繪製的圓於控件區域相切的4個點，都會顯得細一點。你能夠想象，畫筆的筆尖寬度爲8，以它中點掃去，恰好一半的寬度超出的顯示區域，因此，半徑減去畫筆一半的寬度。

　　2.從圓路徑切換到折線路徑，用isNext這個標識。由於咱們的值動畫是勻速的，值區域在（0,2），能夠保證監聽值在<1時，控件還在畫圓，那咱們能夠認爲監聽值等於1，就是圓恰好結束嗎？實際上是沒法保證的，由於不斷改變的curValue多是從0.99直接到1.01，它不必定等於1的。 因此咱們在curValue 》=1 的第一時間，咱們繪製完整個圓路徑，而後切換路徑輪廓，pathMeasure.getLength()就從圓周長 變成了折線的長度。這也是後來的getSegment（）的終點值(curValue - 1)的緣由。