史上最全的贝塞尔曲线(Bezier)全解(二):Android中曲线的简单绘制

2019年5月25日 152次阅读 来源: 桑小年

上一篇中我简单的介(粘)绍(贴)了一下贝塞尔曲线(Bezier)曲线的原理和公式,但是作为数学界排的上名号的渣渣,我只能默默的溜过;
   不过还好,android帮我们实现好了这个贝塞尔曲线的使用;

Path

这个类中封装了要使用贝塞尔曲线(Bezier)的简单方法;使用起来也很简单,总的来说也只有三步

  • 初始化Path
 mPath = new Path();
  • path移动到起点
  mPath.moveTo(startX, startY / 3);
  • 确定直线的终点
 mPath.lineTo(endX, endY / 3);
  • 调用canvas绘制贝塞尔曲线
 canvas.drawPath(mPath, mPaint);

好了,到这里一阶的一条直线就完成了;
  但是这个完全没任何卵用啊,就一条直线有木有!!

但是,我们可以一直画下去,就像这样:

      path.moveTo(touchX + getWidth() / 20, touchY - getHeight() / 10);
        path.lineTo(touchX + getWidth() / 20, touchY);
        path.lineTo(touchX - getWidth() / 20, touchY);
        path.lineTo(touchX - getWidth() / 20, touchY - getHeight() / 10);
        path.lineTo(touchX, touchY - getHeight() / 7);
        path.lineTo(touchX + getWidth() / 20, touchY - getHeight() / 10 + 2);

这段代码绘制完成之后就是一个随着手指一动的小火箭了

《史上最全的贝塞尔曲线(Bezier)全解(二):Android中曲线的简单绘制》 这里写图片描述

  丑爆了有木有,不过还好,如果是大神的话应该可以绘制成一个比较好一些的了吧,主要还是原理,相对于自己直接画直线,已经大大简化了;

二阶曲线##

二阶曲线在安卓中的定义也是很简单的,就是调用quadTo方法,

        mPath.moveTo(startX, startY);
        mPath.quadTo(touchX, touchY, endX, endY);
        canvas.drawPath(mPath, mPaint);

《史上最全的贝塞尔曲线(Bezier)全解(二):Android中曲线的简单绘制》 这里写图片描述

不管是几阶的,都是要先moveTo到起点;

三阶曲线

《史上最全的贝塞尔曲线(Bezier)全解(二):Android中曲线的简单绘制》 这里写图片描述

         mPath.moveTo(pointFStart.x, pointFStart.y);
        mPath.cubicTo(pointFFirst.x, pointFFirst.y, pointFSecond.x, pointFSecond.y, pointFEnd.x, pointFEnd.y);
        canvas.drawPath(mPath, mPaint);

途中从下倒上,四个点依次是pointFStart,pointFFirst,pointFSecond,pointFSecond;根本没什么难度,非常简单,可以直接使用,上篇提到的”心”的移动就是按照这个轨迹进行移动,所以看起来十分顺滑,效果也不错;

贝塞尔曲线的绘制本身并没有什么难度,这些都是很基础的一些东西,但是却能实现一些很炫酷的效果,比如qq上的粘性控件的效果等,这些都可以实现;

好了,简单的使用就介绍到这里了

,[史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心]我会利用贝塞尔曲线实现一些炫酷的效果

最后附上源码:https://github.com/sangxiaonian/BezierIntroduce.git

    原文作者：桑小年
    原文地址: https://www.jianshu.com/p/2b136da858a8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞