Path&PathMeasure完全解析

Posted 花花young

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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方法来使用现成的矩阵,只不过这个矩阵是以左上角为原点





以上是关于Path&PathMeasure完全解析的主要内容,如果未能解决你的问题,请参考以下文章

Path&PathMeasure完全解析

android Path 和 PathMeasure 进阶

Android UIPath 测量 PathMeasure ③ ( 使用 PathMeasure 绘制沿曲线运动的小球 )

安卓自定义View进阶-Path之玩出花样(PathMeasure)

Path特效之PathMeasure打造万能路径动效

Path特效之PathMeasure打造万能路径动效