Path相关方法解说(二)

今天咱们一起来看看Path里 XXXTo 相关的一类方法。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

通过 Path相关方法解说(一)，我们已经对
Path 有了一个非常主要的了解。我们已经知道Path代表一条路径，而这条路径详细表现成什么样。我们自己能够自由发挥，任意构建，今天我们就一起来看看android给我们提供了哪些方法来构建路径。

一、moveTo(float,float)

用于移动路径的起始点到Point(x,y)。咱们都知道对于android系统来说，屏幕的左上角的坐标是 (0,0) , 我们在做一些操作的时候默认基准点也是 (0,0)，比方调用canvas.rotate(float degrees) 将Canvas (画布) 旋转相应的角度，当然 ，Canvas还有另外一个方法rotate(float
degrees,float px, float py)，当中所做的事情就是通过 translate(px, py) 改变了canvas.rotate() 的基准点，Path 的moveTo 方法能够与此进行一个类比，就是为了改变 Path 的起始点；

我们一起看下小样例：

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.STROKE);
        mPaint.setStrokeWidth(PATH_WIDTH);
        mPaint.setColor(Color.RED);

        mPath = new Path();
        mPath.lineTo(150, 150);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        canvas.drawPath(mPath, mPaint);

    }

此时屏幕上展现的效果即从屏幕上画了一条直线，从 (0,0) 到 (150,150)。效果例如以下：

我们在

mPath.lineTo(150, 150)

前面加上一句 mPath.moveTo(50,50)，看看效果：

此时线的起始点移动到了(50,50) 。即从 (50,50) 连到了 (150,150) ;

二、rMoveTo(float,float)

前面加上 r 的 XXXTo方法，仅仅须要理解它的意义就可以明确， r 即 relative ，会相对于前一个点往后计量;

我们对前面的样例稍作修改：

<span style="white-space:pre">	</span>mPath = new Path();
<span style="white-space:pre">	</span>mPath.moveTo(50, 50);
        mPath.lineTo(150, 150);
        // 相对前面的点 x 往后移动 100 个像素，y 往下移动 100 个像素
        mPath.rMoveTo(100, 100);
        mPath.lineTo(400, 400);

依照我们的预期，此时应该是画两条线分别从 (0,0) - (150,150) 和 (250,250) - (400,400) , 当调 rMoveTo(float,float) 时前一个点为 (0,0) 。那么效果等同于 moveTo(float,float);

三、lineTo(float x,float y)

上面的样例也已经能看出该方法的作用了，即从上一个点以直线方式连接到參数里的 （x,y）

四、rLineTo(float x,float y) , 即以当前点作为基准点。以直线的形式连接到 (currentX + x , currentY + y)

五、arcTo(RectF oval,
float startAngle, float sweepAngle,boolean forceMoveTo)

该方法是加入一段弧线到path中，我们先来看看各參数的意义：

第一个參数：RectF oval 代表弧线所在椭圆所占的矩形区域。

这句话看起来还有点绕，细细一想。一段弧线必定是附属于一个椭圆或正圆。仅仅只是仅仅是显示了这个椭圆或正圆的一部分，而这个椭圆或正圆又必定刚好被包括于一个矩形区域。该參数就是这个矩形区域：

第二个參数：float startAngle 代表弧线的起始角度；

第三个參数：float sweepAngle 代表弧线所划过的角度；

第四个參数：boolean forceMoveTo 假设为true ，则效果相当于新建一条路径并 moveTo 到弧线起始点。然后加入弧线,可能有人会问，这种方法有何用，待会一起看样例；

大家须要注意的是 0 度所在点并非正上方，而是时钟上三点钟所在的位置；

接下来我们加入一段弧线到刚才的 path 里：

        mPath = new Path();
        mPath.moveTo(50, 50);
        mPath.lineTo(150, 150);
        // 相对前面的点 x 往后移动 100 个像素，y 往下移动 100 个像素
        mPath.rMoveTo(100, 100);
        mPath.lineTo(400, 400);
        mRectF = new RectF(0, 400, 800, 800);
        mPath.arcTo(mRectF, 0, 90);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        canvas.drawPath(mPath, mPaint);
        canvas.drawRect(mRectF, mPaint);

    }

此时的效果例如以下：

我们能够看到此时多了一条线（处理成蓝色），因为弧线的起始点和 path 的最后一个点不是同一个点。path 会直接lineTo到弧线的起始点。然后arcTo ，而对于我们来说，我们不想要这一条多余的线。该怎么办呢？arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)
方法就派上用场了：

改使用

mPath.arcTo(mRectF, 0, 90, true);

此时效果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

六、close()

顾名思义，即关闭当前路径，还是使用前面的样例：

<span style="white-space:pre">	</span>mPath.rMoveTo(100, 100);
        mPath.lineTo(400, 400);
        mRectF = new RectF(0, 400, 800, 800);
        mPath.arcTo(mRectF, 0, 90);
        mPath.close();

大家能够先想象一下如今的结果应该是什么：

我们再看看改为

mPath.arcTo(mRectF, 0, 90, true);

之后的效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

此时对于close的结果是否有结论了呢？close相当于lineTo到最后一次moveTo的终点，为了便于理解，能够把每次调用moveTo 之后的Path 当作一条独立的路径；

七、path 里与贝塞尔曲线相关的方法：

我们先简单的了解下贝塞尔曲线：

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线。贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在画图工具上看到的钢笔工具就是来做这样的矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的參数曲线。在一些比較成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔曲线的一般參数方程为：

二次贝塞尔曲线(有一个控制点)方程为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

三次贝塞尔曲线(有两个控制点)方程为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

android 仅仅对低阶贝塞尔曲线进行了封装。二次贝塞尔曲线相应 quadTo(float x1,float y1,float x2,
float y2) , 三次贝塞尔曲线相应 cubicTo(float x1,float y1,
float x2, float y2, float x3,float y3)

(1)、quadTo(float x1, float y1, float x2, float y2)

x1、y1 代表控制点的 x、y。即一个控制点动态图中的P1。x2、y2 代表目标点的 x、y；

(2)、cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

x1、y1 代表控制点1的 x、y；

x2、y2 代表控制点2的 x、y。

x3、y3 代表目标点的 x、y。

接下来咱们利用上面的两个方法画个令人怦然心动的爱心出来：

public class HeartView extends View {

    private static final int PATH_WIDTH = 2;
    // 起始点
    private static final int[] START_POINT = new int[] {
            300, 270
    };
    // 爱心下端点
    private static final int[] BOTTOM_POINT = new int[] {
            300, 400
    };
    // 左側控制点
    private static final int[] LEFT_CONTROL_POINT = new int[] {
            450, 200
    };
    // 右側控制点
    private static final int[] RIGHT_CONTROL_POINT = new int[] {
            150, 200
    };
    private Paint mPaint;
    private Path mPath;

    public HeartView(Context context) {
        super(context);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.STROKE);
        mPaint.setStrokeWidth(PATH_WIDTH);
        mPaint.setColor(Color.RED);

        mPath = new Path();
        mPath.moveTo(START_POINT[0], START_POINT[1]);
        mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
                BOTTOM_POINT[1]);
        mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        canvas.drawPath(mPath, mPaint);

        canvas.drawCircle(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], 5, mPaint);
        canvas.drawCircle(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], 5, mPaint);
    }
}

效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

到这里，path的基本使用应该没啥问题了，下一篇我们给这个爱心加上动效，使之更有feel。