路徑跟蹤 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)的原因，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/11373.html

標籤：Android

上一篇：Android 匯入他人專案配置問題——專案運行不起來

下一篇：Android連載6-碎片