Android 贝塞尔曲线的浅析

博客也开了挺长时间了,一直都没有来写博客,主要原因是自己懒~~~此篇博客算是给2017年一个好的开始,同时也给2016年画上一个句点,不留遗憾。

那就让我们正式进入今天的主题:贝塞尔曲线。

首先,让我们来了解下什么是贝塞尔曲线。

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。

  

了解了什么是贝塞尔曲线,接下来我们来看看贝塞尔曲线的分类。再讲分类之前,首先要提到的两个概念:数据点和控制点。

数据点:曲线的起始点和终点。

控制点:顾名思义,就是控制曲线的弯曲程度的点。

曲线主要有以下分类:

一阶曲线:

  公式:

  动态图:

  原理:从P0(起始点)到P1(终点)之间连续的点组成的一条直线。一阶曲线是没有控制点的。

二阶曲线:

  公式:

  静态图:

  动态图:

  原理:点Q0(t)的变化从P0到P1,描述一个线性Bézier曲线。

      点Q1(t)的变化从P1到P2,描述了一个线性Bézier曲线。

      B点(t)的变化从Q0(t)到Q1(t),描述了一个二次Bézier曲线。

      P0为起始点,P2为终点,P1为控制点。

三阶曲线: 

  公式: 

  静态图:  

  动态图:

  原理:其原理和二阶曲线的原理类似,主要是多了个控制点。

除了以上三种贝塞尔曲线的分类,当然还有四阶曲线、五阶曲线...........

说了这么多了,那我们到底该如何使用贝塞尔曲线呢,有没有方法提供给我们呢?

当然有提供给我们的,在我们自定义View的时候,会用到一个叫Path的类,在这个类中,存在两个方法:quadTo(绘制二阶曲线), cubicTo(绘制三阶曲线)。这两个方法我会简单的用两段代码来说明下。这里我会贴出主要的代码:

二阶曲线主要代码块:

@Override
    protected void onDraw(Canvas canvas) {
        //画直线        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(4);
        canvas.drawLine(firstPoint.x,firstPoint.y,midPoint.x,midPoint.y,mPaint);
        canvas.drawLine(lastPoint.x,lastPoint.y,midPoint.x,midPoint.y,mPaint);
       //画点
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(firstPoint.x,firstPoint.y,mPaint);
        canvas.drawPoint(lastPoint.x,lastPoint.y,mPaint);
        canvas.drawPoint(midPoint.x,midPoint.y,mPaint);
       //画二阶曲线
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(8);
        Path path = new Path();
        path.moveTo(firstPoint.x,firstPoint.y);
        path.quadTo(midPoint.x,midPoint.y,lastPoint.x,lastPoint.y);
        canvas.drawPath(path,mPaint);
    }

效果图:(ps:不会在手机上弄动态图)

三阶曲线主要代码块:

@Override
    protected void onDraw(Canvas canvas) {
       mPaint.setColor(Color.BLACK);
        //画直线
        mPaint.setStrokeWidth(4);
        canvas.drawLine(firstPoint.x,firstPoint.y,control1.x,control1.y,mPaint);
        canvas.drawLine(midPoint1.x,midPoint1.y,midPoint2.x,midPoint2.y,mPaint);
        canvas.drawLine(midPoint2.x,midPoint2.y,lastPoint.x,lastPoint.y,mPaint);
        //画点
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(firstPoint.x,firstPoint.y,mPaint);
        canvas.drawPoint(lastPoint.x,lastPoint.y,mPaint);
        canvas.drawPoint(midPoint1.x,midPoint1.y,mPaint);
        canvas.drawPoint(midPoint2.x,midPoint2.y,mPaint);
        //画三阶曲线
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(8);
        Path path = new Path();
        path.moveTo(firstPoint.x,firstPoint.y);
        path.cubicTo(midPoint1.x,midPoint1.y,midPoint2.x,midPoint2.y,
        lastPoint.x,lastPoint.y);
        canvas.drawPath(path,mPaint);
    }

效果图:(ps:还是不会在手机上弄动态图)  

好了,至此,贝塞尔曲线的浅析已经讲完了,如还想更多去了解贝塞尔曲线,可以看看这个网站:

https://en.wikipedia.org/wiki/B%C3%A9zier_curve

由于第一次写博客,有些地方表达的不是很好,还请谅解。如有好的建议和不足之处还望指出,一定虚心更改。

时间: 2024-10-10 09:13:46

Android 贝塞尔曲线的浅析的相关文章

Android 贝塞尔曲线库

最近做的一个小项目需要绘制一些折线图,AChartEngine其实里面包含很多图,虽然是开源的,但毕竟不是自己写的,而且项目稍有点庞大,有些东西修改起来还是得花点时间的,所以最后打算自己写一个,参考了多看阅读的阅读时间曲线效果,先看效果图: 下面这张是没有中间"平均3小时/天"那个小条的效果 已经开源了,代码放在github,地址是https://github.com/Steven-Luo/android-bezier-curve-chart 用法很简单 布局文件少不了: 1 <

Android 贝塞尔曲线实现QQ拖拽清除效果

纯属好奇心驱动写的一个学习性Demo,效果如下: 这个小功能最重要的点在于起始点和触摸点之间的连接线绘制,它并不是一条单纯的直线,而是中间细两头粗的一条不规则的Path,而这个中间向内弯曲的效果正是一条贝塞尔曲线,中间这个Path是由两条贝塞尔曲线和两条直线组成.看下图: 两个带圆弧的线就是由三点确认的一个贝塞尔曲线: 在Android已经有提供画贝塞尔曲线的接口,三个点传进去,效果就出来了. 贝塞尔曲线是用三个或多个点来确定的一条曲线,它在图形图像学中有相当重要的地位,Path中也提供了一些方

Android贝塞尔曲线应用-跳动的水滴

主要通过6个控制点实现. val startPoint = PointF() val endPoint = PointF() val control1 = PointF() val control2 = PointF() val control3 = PointF() val control4 = PointF() 绘制过程: private fun drawWater(canvas: Canvas) { waterPath.apply { reset() moveTo(startPoint)

从Android动画到贝塞尔曲线

基础知识: 动画通过连续播放一系列画面,给视觉造成连续变化的图画.很通俗的一种解释.也很好理解.那么我们先来一个案例看看. 动画案例:百度贴吧小熊奔跑 效果: topic.gif 代码: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:

Android 利用二次贝塞尔曲线模仿购物车添加物品抛物线动画

0.首先,先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式参考:http://www.jianshu.com/p/c0d7ad796cee 作者:许方镇. 2.原理:计算被点击 view.购物车view 以及他们所在父容器相对于屏幕的坐标. 3.在呗点击View坐标位置 父容器通过addView 增加需要完成动画的imgview. 4.自定义估值器 通过二次贝塞尔曲线公式(2个数据点,一个控制点)完成抛物线路径上的点xy坐标计算. 5.利用属性动画 +自定义估值器 完成imgview在父容

Android 自定义View高级特效,神奇的贝塞尔曲线

效果图 效果图中我们实现了一个简单的随手指滑动的二阶贝塞尔曲线,还有一个复杂点的,穿越所有已知点的贝塞尔曲线.学会使用贝塞尔曲线后可以实现例如QQ红点滑动删除啦,360动态球啦,bulabulabula~ 什么是贝塞尔曲线? 贝赛尔曲线(Bézier曲线)是电脑图形学中相当重要的参数曲线.更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例.贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝

Android自定义View进阶 - 贝塞尔曲线

Path之贝塞尔曲线 作者微博: @GcsSloop [本系列相关文章] 在上一篇文章Path之基本图形中我们了解了Path的基本使用方法,本次了解Path中非常非常非常重要的内容-贝塞尔曲线. 一.Path常用方法表 为了兼容性(偷懒) 本表格中去除了在API21(即安卓版本5.0)以上才添加的方法.忍不住吐槽一下,为啥看起来有些顺手就能写的重载方法要等到API21才添加上啊.宝宝此刻内心也是崩溃的. 作用 相关方法 备注 移动起点 moveTo 移动下一次操作的起点位置 设置终点 setLa

Android日常学习:OpenGL 实践之贝塞尔曲线绘制

说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简单说一下自己的理解: 现在假设我们要在坐标系中绘制一条直线,直线的方程很简单,就是 y=x ,很容易得到下图: 现在我们限制一下 x 的取值范围为 0~1 的闭区间,那么可以得出 y 的取值范围也是 0~1. 而在 0~1 的区间范围内,x 能取的数有多少个呢?答案当然是无数个了. 同理,y 的取值

【开源项目解析】QQ“一键下班”功能实现解析——学习Path及贝塞尔曲线的基本使用

早在很久很久以前,QQ就实现了"一键下班"功能.何为"一键下班"?当你QQ有信息时,下部会有信息数量提示红点,点击拖动之后,就会出现"一键下班"效果.本文将结合github上关于此功能的一个简单实现,介绍这个功能的基本实现思路. 项目地址 https://github.com/chenupt/BezierDemo 最终实现效果 实现原理解析 我个人感觉,这个效果实现的很漂亮啊!那么咱们就来看看实现原理是什么~ 注:下面内容请参照项目源码观看. 其