Android从零开搞系列：自定义View（12）贝塞尔曲线的应用

转载请注意：http://blog.youkuaiyun.com/wjzj000/article/details/70504617

本菜开源的一个自己写的Demo，希望能给Androider们有所帮助，水平有限，见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect （拆解GitHub上的优秀框架于一体，全部拆离不含任何额外的库导入）
https://github.com/zhiaixinyang/MyFirstApp（Retrofit+RxJava+MVP）

写在前面

今天纠结了好久，想不出来该记录些什么。明明什么都会，为什么我还要这么努力的写博客？这就是我和明明的差距。
因为不会的太多，导致自己越来越不知道该怎么坚持。但是路还是要一步一步的走，饭还是要一口一口的吃，毕竟蒸羊羔,蒸熊掌,蒸鹿尾儿,烧花鸭,烧雏鸡儿,烧子鹅,卤煮咸鸭,酱鸡,腊肉,松花,小肚儿….都没吃过？你以为我只会吃，我还会饿。

开始

今天记录一下贝尔赛曲线的用法。如果没猜错的话，能打开这篇博客的看官应该对贝尔赛多多少少有些了解。
网上各种各样的关于贝塞尔的动态图应该也都领略过，今天我主要是结合一个效果，梳理一下贝塞尔的用法。

先看效果

我们可以很明显的看出，用于弹射火箭的绳子的效果就是贝塞尔曲线的应用。
在开始看代码之前，我们先简单梳理一下这个思路：
我们知道二阶的贝塞尔曲线是通过一个起始点和一个终点，再加一个控制点来确定曲线效果的。
因此我们手指按下的点的坐标就是那个控制贝塞尔曲线的控制点。OK，让我们结合代码走一波：

---

paint.setStrokeWidth(10);
arcPath.reset();
arcPath.moveTo(mWidth * 1 / 10, mHeight * 7 / 10);
if (yHeight > mHeight * 7 / 10 && xWidth > mWidth * 4 / 10 && xWidth < mWidth * 6 / 10) {
        arcHeight = yHeight + yHeight - mHeight * 7 / 10;
    } else {
        arcHeight = mHeight * 7 / 10;
    }
    //以上部分作用为调整线段位置
    //quadTo就是我们要使用的二阶贝塞尔曲线的方法。需要传四个参数，前两个对应控制点的x，y；那么后两个就是线段结束点的x，y。
    //那么线段的moveTo方法，就是我们贝塞尔曲线的起始点的x，y。
    arcPath.quadTo(mWidth * 5 / 10, arcHeight, mWidth * 9 / 10, mHeight * 7 / 10);
    canvas.drawPath(arcPath, paint);
    //省略部分代码
}

当然一切到这里并没有什么卵用，我们现在仅仅是画了一条直线而已。那么接下来我们就是要让这条直线动起来。

既然需要动，那么我们会很自然的想到，在onTouchEvent方法中搞这件事情就好了。原理也是很简单，通过获取按下时的坐标赋值给我们的quadTo中的arcHeight，这里为了简单仅仅改变贝塞尔曲线控制点的y坐标。

case MotionEvent.ACTION_MOVE:
        xWidth = x;
        yHeight = y;
        postInvalidate();
        break;

Ok，效果就出来了….

---

补充

简单瞅了一下，发现全篇博客内容真的非常的少…所以把画火箭的代码也贴上吧。

        //确定火箭控制点的范围
        if (xWidth < xSize) {
            xWidth = xSize;
        }
        if (xWidth > mWidth * 9 / 10) {
            xWidth = mWidth * 9 / 10;
        }
        if (yHeight > mHeight * 8 / 10) {
            yHeight = mHeight * 8 / 10;
        }
        if (yHeight > mHeight * 7 / 10 && xWidth < mWidth * 4 / 10) {
            yHeight = mHeight * 7 / 10;
        }
        if (yHeight > mHeight * 7 / 10 && xWidth > mWidth * 6 / 10) {
            yHeight = mHeight * 7 / 10;
        }


        //绘制火箭
        path.moveTo(xWidth - xSize * 1 / 2, yHeight - ySize * 3 / 5);
        path.lineTo(xWidth, yHeight - ySize);
        path.lineTo(xWidth + xSize * 1 / 2, yHeight - ySize * 3 / 5);
        path.moveTo(xWidth - xSize * 1 / 4, yHeight - ySize * 4 / 5);
        path.lineTo(xWidth - xSize * 1 / 4, yHeight);
        path.lineTo(xWidth + xSize * 1 / 4, yHeight);
        path.lineTo(xWidth + xSize * 1 / 4, yHeight - ySize * 4 / 5);
        canvas.drawPath(path, paint);

尾声

希望各位看官可以star我的GitHub，三叩九拜，满地打滚求star：
https://github.com/zhiaixinyang/PersonalCollect
https://github.com/zhiaixinyang/MyFirstApp