Path的一些參數 1. FillType Op介紹

1. FillType

path的填充方式，有4種，舉例說明啥效果

    /**
     * Enum for the ways a path may be filled.
     */
    public enum FillType {
        // these must match the values in SkPath.h
        /**
         * Specifies that "inside" is computed by a non-zero sum of signed
         * edge crossings.
         */
        WINDING         (0),
        /**
         * Specifies that "inside" is computed by an odd number of edge
         * crossings.
         */
        EVEN_ODD        (1),
        /**
         * Same as {@link #WINDING}, but draws outside of the path, rather than inside.
         */
        INVERSE_WINDING (2),
        /**
         * Same as {@link #EVEN_ODD}, but draws outside of the path, rather than inside.
         */
        INVERSE_EVEN_ODD(3);

        FillType(int ni) {
            nativeInt = ni;
        }

        final int nativeInt;
    }

1.1 WINDING

默認值就是這個，測試代碼如下，數學裏的並集，屬於A或者屬於B的部分

        path2.apply {
            reset()
            addCircle(100f,100f,50f,Path.Direction.CW)
        }

        path3.apply {
            reset()
            addCircle(200f,200f,50f,Path.Direction.CW)
        }
        path.apply {
            reset()
            path.addPath(path2)
            path.fillType=Path.FillType.WINDING
            path.addPath(path3)
        }

1.2 INVERSE_WINDING

上邊的效果取反，
測試代碼

        path2.apply {
            reset()
            addCircle(100f,100f,50f,Path.Direction.CW)
        }

        path3.apply {
            reset()
            addCircle(200f,200f,50f,Path.Direction.CW)
        }

        path.apply {
            reset()
            path.addPath(path2)
            path.fillType=Path.FillType.INVERSE_WINDING
            path.addPath(path3)
        }

canvas.drawPath(path,p)

1.3 EVEN_ODD

把交集扣掉，也就是把兩者共有的部分扣掉

        path3.apply {
            reset()
            addCircle(200f,200f,50f,Path.Direction.CW)
        }

        path4.apply {
            reset()
            addCircle(280f,200f,60f,Path.Direction.CW)
        }

        path.apply {
            reset()
            path.addPath(path3)
            path.fillType=Path.FillType.EVEN_ODD
            path.addPath(path4)
        }

1.4 INVERSE_EVEN_ODD

上邊的效果取反

Op介紹

先看幾張圖，我們的path如下紅線

實際需求中，我們需要下圖紫色的區域，咋辦

先加上下圖的梯形再說

效果如下

這時候就知道咋辦了，把左右兩邊2個弧形踢出去就剛剛好，而path也剛好有這個方法

如下,path3,path4就是那2個圓弧

path.op(path3,Path.Op.DIFFERENCE)
            path.op(path4,Path.Op.DIFFERENCE)

簡單看下Op的屬性

    public enum Op {
        /**
         * Subtract the second path from the first path.簡單理解爲把括號裏的path從當前path裏摳掉
         */
        DIFFERENCE,
        /**
         * Intersect the two paths. 兩條路徑相交的部分
         */
        INTERSECT,
        /**
         * Union (inclusive-or) the two paths.
         */
        UNION,
        /**
         * Exclusive-or the two paths.
         */
        XOR,
        /**
         * Subtract the first path from the second path.
         */
        REVERSE_DIFFERENCE
    }

下面簡單寫下代碼和效果圖

DIFFERENCE

先紅圈，再藍圈，完事從紅圈裏扣除籃圈，也就是黃色的月牙部分了

        val path1=Path().apply {
            addCircle(0f,0f,100f,Path.Direction.CW)
        }
        val path2=Path().apply {
            addCircle(50f,0f,100f,Path.Direction.CW)
        }

        p.color=Color.RED
        canvas.drawPath(path1,p)
        p.color=Color.BLUE
        canvas.drawPath(path2,p)

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            p.color=Color.YELLOW
            path1.op(path2,Path.Op.DIFFERENCE)
            canvas.drawPath(path1,p)
        }

INTERSECT

代碼同上，就是Op改下而已，效果圖如下，交集，中間的部分

UNION

合集，黃色部分

XOR

和交集剛好相反，去同存異，兩條path不一樣的地方

REVERSE_DIFFERENCE

和DIFFERENCE 差不錯，這個是把當前路徑從參數path里扣除，而DIFFERENCE是從當前路徑把參數裏的path扣除
換句話說，如下兩種代碼效果是一樣的

path1.op(path2,Path.Op.DIFFERENCE)
 canvas.drawPath(path1,p)

path2.op(path1,Path.Op.REVERSE_DIFFERENCE)
            canvas.drawPath(path2,p)

實際使用

那個做翻頁效果的時候會用到，我們需要扣除圓弧的部分。