Path&PathMeasure完全解析

前言

        Path扮演着路径的角色，在绘制View起着非常重要的位置，而PathMeasure是对Path进行测量，通过使用PathMeasure可以更加方便的使用Path工具。网上都好多关于这方面的文章，在这里只是做个笔录，不好不要见怪。嘿嘿

Part 1、谈谈Path的使用

首先先分析方法

public class Path {    /**     * 空构造方法     */    public Path() {        mNativePath = init1();    }    /**     * 重置Path     */    public void reset() {        isSimplePath = true;        mLastDirection = null;        if (rects != null) rects.setEmpty();        // We promised not to change this, so preserve it around the native        // call, which does now reset fill type.        final FillType fillType = getFillType();        native_reset(mNativePath);        setFillType(fillType);    }    /**     * 和reset一样，只不过这个会将FillType也清楚掉，但reset不会     */    public void rewind() {        isSimplePath = true;        mLastDirection = null;        if (rects != null) rects.setEmpty();        native_rewind(mNativePath);    }    /**     * Path和Path之间的运算方法     */    public boolean op(Path path, Op op) {        return op(this, path, op);    }    /**     * 得到填充的类型     */    public FillType getFillType() {        return sFillTypeArray[native_getFillType(mNativePath)];    }    /**     * 设置Path的填充类型     */    public void setFillType(FillType ft) {        native_setFillType(mNativePath, ft.nativeInt);    }    /**     * 判断是否反向填充     */    public boolean isInverseFillType() {        final int ft = native_getFillType(mNativePath);        return (ft & FillType.INVERSE_WINDING.nativeInt) != 0;    }    /**    * 计算Path所占用的空间以及位置，将信息存入bounds中，exact:是否精确测量    */    @SuppressWarnings({"UnusedDeclaration"})    public void computeBounds(RectF bounds, boolean exact) {        native_computeBounds(mNativePath, bounds);    }    /**     * 自动改变，取反     */    public void toggleInverseFillType() {        int ft = native_getFillType(mNativePath);        ft ^= FillType.INVERSE_WINDING.nativeInt;        native_setFillType(mNativePath, ft);    }    /**     * Path是否为空     */    public boolean isEmpty() {        return native_isEmpty(mNativePath);    }    /**     * 将画笔移动的坐标位置     */    public void moveTo(float x, float y) {        native_moveTo(mNativePath, x, y);    }    /**     * 和上面一样，只不过上面是绝对位置，这个是相对位置（相对于上一个点）     */    public void rMoveTo(float dx, float dy) {        native_rMoveTo(mNativePath, dx, dy);    }    /**     * 在lineTo之前要先moveTo否则则将默认为从原点开始划线     */    public void lineTo(float x, float y) {        isSimplePath = false;        native_lineTo(mNativePath, x, y);    }    /**     * 于lineTo相对，这个是相对位置     */    public void rLineTo(float dx, float dy) {        isSimplePath = false;        native_rLineTo(mNativePath, dx, dy);    }    /**     * 二阶贝塞尔曲线     */    public void quadTo(float x1, float y1, float x2, float y2) {        isSimplePath = false;        native_quadTo(mNativePath, x1, y1, x2, y2);    }    /**     *      */    public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {        isSimplePath = false;        native_rQuadTo(mNativePath, dx1, dy1, dx2, dy2);    }    /**     * 三阶贝塞尔曲线     */    public void cubicTo(float x1, float y1, float x2, float y2,                        float x3, float y3) {        isSimplePath = false;        native_cubicTo(mNativePath, x1, y1, x2, y2, x3, y3);    }    /**     *      */    public void rCubicTo(float x1, float y1, float x2, float y2,                         float x3, float y3) {        isSimplePath = false;        native_rCubicTo(mNativePath, x1, y1, x2, y2, x3, y3);    }    /**     * 画弧线     */    public void arcTo(RectF oval, float startAngle, float sweepAngle,                      boolean forceMoveTo) {        arcTo(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, forceMoveTo);    }    /**     * 当调用close则将结束点和起始点连线     */    public void close() {        isSimplePath = false;        native_close(mNativePath);    }    /**     * 绘制的方向     */    public enum Direction {        CW  (0),    // 顺时针方向        CCW (1);    //逆时针        Direction(int ni) {            nativeInt = ni;        }        final int nativeInt;    }    /**     * 提供了大量的add图形的方法（将更多的图片添加到Path路径便于设置方向、填充方式）     */    public void addXXX(XXX) {    }    /**     * 将Path进行偏移，偏移之后的结果存入dst中     */    public void offset(float dx, float dy, @Nullable Path dst) {        if (dst != null) {            dst.set(this);        } else {            dst = this;        }        dst.offset(dx, dy);    }    /**     * 将Path进行偏移，偏移之后的结果写入path中     */    public void offset(float dx, float dy) {        if (isSimplePath && rects == null) {            // nothing to offset            return;        }        if (isSimplePath && dx == Math.rint(dx) && dy == Math.rint(dy)) {            rects.translate((int) dx, (int) dy);        } else {            isSimplePath = false;        }        native_offset(mNativePath, dx, dy);    }}

其中里面有一个Path的运算和Path填充比较常用，下面来介绍下

(1)Path运算：

    /**     * Path和Path之间的运算     */    public enum Op {        /**         * path1中减去Path2剩下的部分         */        DIFFERENCE,        /**         * path1和path2相交的部分         */        INTERSECT,        /**         * 包含path1和path2部分         */        UNION,        /**         *包含path和path2但不包含相交的部分         */        XOR,        /**         * Path2减去Path1剩下的部分         */        REVERSE_DIFFERENCE    }

为了更好的理解，下面来附上一张图

    

根据Path的运算我们可以实现一个八卦图的效果

效果~

    

实现起来非常简单，只需要利用上面的运算规则即可，这里就不多说，直接上代码。

        canvas.translate(getWidth() / 2, getHeight() / 2);        canvas.save();        for (int i = 0; i < 2; i++) {            path1.addCircle(0, 0, 200, Path.Direction.CW);            path2.addRect(-200, -200, 0, 200, Path.Direction.CW);            path1.op(path2, Path.Op.INTERSECT);//去相交的区域            path2.reset();            path2.addCircle(0, -100, 100, Path.Direction.CCW);            path1.op(path2, Path.Op.UNION);//去全部的区域            path2.reset();            path2.addCircle(0, 100, 100, Path.Direction.CW);            path1.op(path2, Path.Op.DIFFERENCE);//取Path1减去path2的区域            canvas.drawPath(path1, paint);            canvas.rotate(180, 0, 0);        }        canvas.restore();        paint.setShader(new RadialGradient(0, -100, 25, Color.WHITE, Color.BLACK, Shader.TileMode.MIRROR));        canvas.drawCircle(0, -100, 25, paint);        paint.setShader(new RadialGradient(0, 100, 25, Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));        canvas.drawCircle(0, 100, 25, paint);

(2)Path的填充：

    /**     * Enum for the ways a path may be filled.     */    public enum FillType {        // these must match the values in SkPath.h        /**         * 非零环绕数规则         */        WINDING         (0),        /**         *奇偶规则         */        EVEN_ODD        (1),        /**         * 反非零环绕数规则         */        INVERSE_WINDING (2),        /**         * 反奇偶规则         */        INVERSE_EVEN_ODD(3);        FillType(int ni) {            nativeInt = ni;        }        final int nativeInt;    }

关于上面的解释在网上有一种比较可靠

网址：http://blog.csdn.net/u013831257/article/details/51477575

奇偶规则：从任意位置p作一条射线， 若与该射线相交的图形边的数目为奇数，则p是图形内部点，否则是外部点。

非零环绕数规则：首先使图形的边变为矢量。将环绕数初始化为零。再从任意位置p作一条射线。当从p点沿射线方向移动时，对在每个方向上穿过射线的边计数，每当图形的边从右到左穿过射线时，环绕数加1，从左到右时，环绕数减1。处理完图形的所有相关边之后，若环绕数为非零，则p为内部点，否则，p是外部点。

接下来我们先了解一下两种判断方法是如何工作的。

奇偶规则(Even-Odd Rule)

这一个比较简单，也容易理解，直接用一个简单示例来说明。

      

在上图中有一个四边形，我们选取了三个点来判断这些点是否在图形内部。
P1: 从P1发出一条射线，发现图形与该射线相交边数为0，偶数，故P1点在图形外部。
P2: 从P2发出一条射线，发现图形与该射线相交边数为1，奇数，故P2点在图形内部。
P3: 从P3发出一条射线，发现图形与该射线相交边数为2，偶数，故P3点在图形外部。

非零环绕数规则(Non-Zero Winding Number Rule)

     
P1: 从P1点发出一条射线，沿射线防线移动，并没有与边相交点部分，环绕数为0，故P1在图形外边。
P2: 从P2点发出一条射线，沿射线方向移动，与图形点左侧边相交，该边从左到右穿过穿过射线，环绕数－1，最终环绕数为－1，故P2在图形内部。
P3: 从P3点发出一条射线，沿射线方向移动，在第一个交点处，底边从右到左穿过射线，环绕数＋1，在第二个交点处，右侧边从左到右穿过射线，环绕数－1，最终环绕数为0，故P3在图形外部。

通常，这两种方法的判断结果是相同的，但也存在两种方法判断结果不同的情况，如下面这种情况：

注意图形线段的方向，就不详细解释了，用上面的方法进行判断即可。

     

通过上面的介绍进行验证

                path.op(path1, ops[i - 1]);                canvas.drawPath(path, paint);

效果~

     

对于FillType=EVENT_ODD的时候，CCW和CW效果是一样的，但对于WINDING就需要考虑的绘制的方向

leftCenterX = startX + smallWidth * (i % 2);            leftCenterY = startY + smallHeight * (i / 2);            path.setFillType(Path.FillType.WINDING);            path.addCircle(centerX, centerY, raduis, Path.Direction.CCW);            path.addCircle(centerX, centerY, centerRadios - 50, Path.Direction.CCW);            canvas.drawPath(path, paint);

根据上面的规则来做一个环嵌套环的效果

     
Part 2、PathMeasure的使用

首先先分析方法

public class PathMeasure {    private Path mPath;    /**     * 创建一个空的PathMeasure     */    public PathMeasure() {        mPath = null;        native_instance = native_create(0, false);    }        /**     * 用这个构造函数可创建一个空的PathMeasure，但是使用之前需要先调用setPath方法来与Path进行关联。     * 被关联的Path必须是已经创建的好的，如果关联之后Path的内容进行了更改则需要使用setPath方法重新进行关联     */    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);    }    /**     * 用这个构造函数是创建一个PathMeasure并关联一个Path，其实和创建一个空的PathMeasure后调用setPath进行关联效果是一样的     * 同样被关联的Path也必须已经是创建好的，如果关联的Path内容进行了更改，则需要是用setPath方法重新关联。     * 第二个参数是用来确保Path闭合，如果设置为true，则不论之前是否闭合，都会自动闭合该Path（如果Path可以闭合的话）     * 这里需要注意：     *     1、不论forceClosed设置为何种状态都不会影响原有的状态，即Path与PathMeasure关联之后，之前的Path不会有任何的改变     *     2、forceClosed的设置状态可能会影响测量结果，如果Path未闭合但在与PathMeasure关联的时候设置了true，则测量的结果     *     可能会比Path实际的长度稍长一点，获取到是该Path闭合的状态    */    public void setPath(Path path, boolean forceClosed) {        mPath = path;        native_setPath(native_instance,                       path != null ? path.readOnlyNI() : 0,                       forceClosed);    }    /**     * 获取Path的总长度     */    public float getLength() {        return native_getLength(native_instance);    }    /**     * 用于得到路径上某一长度位置以及该位置的正切值     * 返回值：判断是否获取成功 true表示成功，数据会存入pos和tan中     * 参数     *     distance : 距离Path起点的长度 取值范围0<=distance<=getLength     *     pos      : 该点的坐标值     *     tan      : 该点的正切值 */    public boolean getPosTan(float distance, float pos[], float tan[]) {        if (pos != null && pos.length < 2 ||            tan != null && tan.length < 2) {            throw new ArrayIndexOutOfBoundsException();        }        return native_getPosTan(native_instance, distance, pos, tan);    }    public static final int POSITION_MATRIX_FLAG = 0x01;    // must match flags in SkPathMeasure.h    public static final int TANGENT_MATRIX_FLAG  = 0x02;    // must match flags in SkPathMeasure.h    /**     * 用于得到路径上某一长度的位置以及该位置的正切值矩阵     * 返回值：判断获取是否成功     * 参数     *      1、distance ：距离起点的长度　　 *      2、matrix : 根据flags封装好的matrix，会根据flags的位置而存入不同的内容     *      3、flags : 规定哪些内容会存入到matrix中，可选择POSITION_MATRIX_FLAG（位置）  ANGENT_MATRIX_FLAG(正切)    */    public boolean getMatrix(float distance, Matrix matrix, int flags) {        return native_getMatrix(native_instance, distance, matrix.native_instance, flags);    }    /**     * 获取Path的一个片段     * 返回值：判断截取是否成功，true表示截取成功，结果存入dst中，false表示截取失败，不会存在dst中     * 参数     *     startD:开始截取位置距离Path起点的长度，取值范围 0 <=startD<stopD<=path总长度      stopD:结束截取位置距离Path起点的长度，取值范围  0<=startD<stopD<=path总长度     *     dst  : 截取的Path将会添加到dst中，注意是添加不是替换     *     startWithMove: 起始点是否使用moveTo，用于保证截取的Path第一个点位置不变     *               true：保证截取片段不会发生变形    false ： 保证截取片段的Path连续性     *     注意：     *          1、如果startD、stopD的数值不在取值范围【0，getLength】内，或者startD==stopD则返回false，不会改变dst的内容     *          2、如果在Android4.4或者之前的版本，在默认开启硬件加速的情况下，更改了dst的内容后可能会出现问题，请在关闭     *          硬件加速或者给dst添加一个单个操作，例如dst.rLineTo(0,0)     *          3、可以用一下的规则来判断startWithMoveTo的取值     */    public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) {        // Skia used to enforce this as part of it's API, but has since relaxed that restriction        // so to maintain consistency in our API we enforce the preconditions here.        float length = getLength();        if (startD < 0) {            startD = 0;        }        if (stopD > length) {            stopD = length;        }        if (startD >= stopD) {            return false;        }        return native_getSegment(native_instance, startD, stopD, dst.mutateNI(), startWithMoveTo);    }    /**     * 用来判断Path是否闭合，但是如果你在关联Path的时候设置了forceClosed在true的话，这个方法的返回值则一定为true     */    public boolean isClosed() {        return native_isClosed(native_instance);    }    /**     * Path是可以由多条曲线构成的，但不论是getLength,getSegment或者是其它的方法，都只会在其中的第一条线段上运行，     * 而这个nextContour就是用于跳转到下一条曲线的方法，如果跳转成功则返回true，如果跳转失败则返回false     */    public boolean nextContour() {        return native_nextContour(native_instance);    }}

理论都介绍完了，来实现一个如下效果

效果~

     

思路：不断的去对矩形进行截取片段在绘制

            Path dst1 = new Path();            pathMeasure3.getSegment(changeD, pathMeasure3.getLength(), dst1, true);            canvas.drawPath(dst1, paint);            Path dst2 = new Path();            pathMeasure3.getSegment(0, 100 - pathMeasure3.getLength() + changeD, dst2, true);            canvas.drawPath(dst2, paint);

几行代码就搞定了一个动画效果，是不是很简单，为了更好的去了解getPostTan和getMatrix方法，给出如下效果

效果~

     

实现代码

        PathMeasure pathMeasure = new PathMeasure(path, true);        float[] pos = new float[2];        float[] tan = new float[2];        pathMeasure.getPosTan(distance, pos, tan);        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);        Matrix matrix = new Matrix();        //计算方位角        float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI);        matrix.postRotate(degrees, 50, 50);        matrix.postTranslate(pos[0] - 50, pos[1] - 50);        canvas.drawBitmap(bitmap, matrix, null);

tips:

1、Math.atan2() ： 与之比较的是Math.atan(),Math.atan的范围是-pi/2~pi/2之间，Math.atan2()是-pi~pi之间，得到的是弧度需要进一步进行转化为角度值

     

2、你也可以使用getMatrix方法来使用现成的矩阵，只不过这个矩阵是以左上角为原点