贝塞尔曲线_贝塞尔曲线公式 - CSDN
贝塞尔曲线 订阅
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。 展开全文
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。
信息
又    称
贝兹曲线
类    别
应用于二维图形应用程序
中文名
贝塞尔曲线
外文名
(Bézier curve
贝塞尔曲线曲线作用
由于用计算机画图大部分时间是操作鼠标来掌握线条的路径,与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形,拿到鼠标想随心所欲的画图也不是一件容易的事。这一点是计算机万万不能代替手工的工作,所以人们只能颇感无奈。使用贝塞尔工具画图很大程度上弥补了这一缺憾。 贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度);移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意,贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。
收起全文
精华内容
参与话题
  • 图形算法:贝塞尔曲线

    万次阅读 2016-11-03 10:29:22
    图形算法:贝塞尔曲线标签(空格分隔): 算法版本:0 作者:陈小默 声明:禁止商用,禁止转载 发布于:作业部落、CSDN博客图形算法贝塞尔曲线 一什么是贝塞尔曲线贝塞尔曲线的数学推导过程 三使用CC语言实现...

    图形算法:贝塞尔曲线

    标签(空格分隔): 算法

    版本:1
    作者:陈小默
    声明:禁止商用,禁止转载
    

    发布于:作业部落CSDN博客


    一、什么是贝塞尔曲线

    贝塞尔曲线是依据任意位置的点坐标绘制出的一条光滑曲线。其设计思路是按照规律u从0到1的移动过程中,在各个控制点连线的相应位置取点,并对相邻两条线上的点再次连线,重复以上过程使得没有可连接的两个点。
    图3.1.1-1
    对于 图3.1.1-1 点J就是由A、B、C和D四个点所控制的贝塞尔曲线的在规律u时的轨迹点。u从0变化到1时示例如下:
    图3.1.1-2

    二、贝塞尔曲线的数学推导过程

    这里我们以二阶,也就是由三个坐标点控制的曲线为例,参考下图:
    3.1.2-1
    设A点坐标为 (x0,y0) ,B点坐标为 (x1,y1),C点坐标为 (x2,y2),D点坐标为 (x0(u),y0(u)),E点坐标为 (x1(u),y1(u)),F点坐标为 (x(u),y(u))

    x0(u)=u(x1x0)+x0=ux1+(1u)x0(3.1.2.1)

    以此类推

    x1(u)=ux2+(1u)x1(3.1.2.2)

    y0(u)=uy1+(1u)y0(3.1.2.3)

    y1(u)=uy2+(1u)y1(3.1.2.4)

    通过连接D、E两点得到线段DE,求点F的x轴坐标

    x(u)=u{x1(u)x0(u)}+x0(u)=ux1(u)+(1u)x0(u)=(1u)2x0+2u(1u)x1+u2x2=k=02xkCk2uk(1u)2k(3.1.2.5)

    其中的与坐标轴无关项被称为贝塞尔多项式函数(贝塞尔方程)

    BEZk,n(u)=Cknuk(1u)nk(3.1.2.6)

    对于式(3.1.2.5)可以使用式(3.1.2.6)扩展为任意阶数的贝塞尔公式

    x(u)=k=0nxkBEZk,n(u)(3.1.2.7)

    y(u)=k=0nykBEZk,n(u)(3.1.2.8)

    假如我们使用的是三位曲线,还可以扩展Z坐标轴

    z(u)=k=0nzkBEZk,n(u)(3.1.2.9)

    三、使用C\C++语言实现贝塞尔曲线的计算过程

    思路:由于贝塞尔曲线由控制点控制,在计算完成前我们无法确切的知道曲线路径上将要绘制的像素点个数,所以我们可以采取逼近的策略,即将计算出的相邻两点使用直线连接,已达到近似效果。以下过程使用C语言实现

    //该类用来存储三维坐标
    typedef struct{
        float x,y,z;
    }point3D;
    
    //整型数组
    typedef struct{
        int length;
        int * arr;
    }intArray;
    
    //坐标数组
    typedef struct{
        int length;
        point3D * arr;
    }pointArray;
    
    //该方法接受经过计算的贝塞尔点,并对相邻两个点进行连线处理
    void drawLine(pointArray &bezPts);
    
    //此方法用来计算二项式系数
    //接受一个数组对象的引用
    void binomialCoefficient(intArray &C){
        int j,n=C.length-1;
        for(int k=0;k<=n;k++){
            C.arr[k] = 1;
            for(j=n;j>k;j--)
                C.arr[k] *= j;//分子累乘
            for(j=n-k;j>1;j--)
                C.arr[k] /= j;//分母累除
        }
    }
    
    //此方法计算在第规律u处点的坐标位置
    //接受的第一个参数为规律u,第二个参数为将要存放位置点的指针,第三个参数为所有控制点坐标数组,第五个参数为系数数组)
    void computeBezPt(float u,point3D &bezPt,pointArray &ctrlPts,intArray &C){
        int n=ctrlPts.length-1;
        float bezFcn;//保存贝塞尔方程计算结果
        bezPt.x=bezPt.y=bezPt.z=0;//初始化
        for(int k=0;k<=n;k++){
            bezFcn = C.arr[k]*pow(u,k)*pow(1-u,n-k);
            bezPt.x+=ctrlPts.arr[k].x*bezFcn;
            bezPt.y+=ctrlPts.arr[k].y*bezFcn;
            bezPt.z+=ctrlPts.arr[k].z*bezFcn;
        }
    }
    
    //此方法为调用方法,用来产生贝塞尔曲线
    //第一个参数用来接受控制点数组,第二个参数为精度,精度越高两个点之间的距离越小,但是需要的计算时间也就越长
    void bezier(pointArray &ctrlPts,int precision){
        intArray C;
        C.length=ctrlPts.length;
        C.arr = new int[C.length];
        binomialCoefficient(C);//计算系数
    
        pointArray bezPts;//保存计算点的参数
        bezPts.length=precision+1;
        bezPts.arr = new point3D[bezPts.length];
    
        float u;//规律参数
        for(int k=0;k<=precision;k++){
            u = float(k)/float(precision);
            computeBezPt(u,bezPts.arr[k],ctrlPts,C);
        }
        drawLine(bezPts);
        delete[] bezPts.arr;
        delete[] C.arr;
    }

    以上就是贝塞尔曲线的实现过程,这里的绘制直线函数没有定义,我们可以使用其他的图形软件包去实现连线过程。下面展示使用OpenGL的GLUT软件包的实现过程。仅供参考

    void drawLine(pointArray &bezPts){
        glBegin(GL_LINE_STRIP);
        for(int i=0;i<bezPts.length;i++){
            glVertex3f(bezPts.arr[i].x,bezPts.arr[i].y,bezPts.arr[i].z);
        }
        glEnd();
    }
    static pointArray ctrlPts_;
    void displayFcn(void){
        glClear(GL_COLOR_BUFFER_BIT);
        glColor3f(1,0,0);
        bezier(ctrlPts_,100);
        glFlush();
    }
    int main(int argc, char* argv[]){
        ctrlPts_.length = 4;
        point3D ctrlPts[4] = {{-40,-40,0},{-10,200,0},{10,-200,0},{40,40,0}};
        ctrlPts_.arr= ctrlPts;
    
        glutInit(&argc,argv);
        glutInitDisplayMode(GLUT_SINGLE|GLUT_RGBA);
        glutInitWindowPosition(50,50);
        glutInitWindowSize(600,600);
        glutCreateWindow("bezier curve");
        glClearColor(1,1,1,0);
        glMatrixMode(GL_PROJECTION);
        gluOrtho2D(-50,50,-50,50);
        glutDisplayFunc(displayFcn);
        glutMainLoop();
        return 0;
    }
    展开全文
  • 最近一段时间,我对贝塞尔曲线进行了部分的研究,因此就打算写贝塞尔曲线系列的文章来记录自己的研究;规矩我都懂 !  我明白,必须先上图,要不然大家都没兴趣看下去先看比较简单的,贝塞尔曲线的一阶和二阶的应用  ...

      作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了;
    最近一段时间,我对贝塞尔曲线进行了部分的研究,因此就打算写贝塞尔曲线系列的文章来记录自己的研究;

    规矩我都懂 !

      我明白,必须先上图,要不然大家都没兴趣看下去

    先看比较简单的,贝塞尔曲线的一阶和二阶的应用

    这里写图片描述

      看到二阶的贝塞尔曲线有没有感觉很眼熟,没错,360的下火箭弹射时候的小弹弓,还有滑动控件的阴影提示;以前的时候很多小伙伴跟我说这要计算多少数据啊,完全没办法实现啊,现在有了贝塞尔曲线,可以很简单的实现这一个功能;
      不过完全不能这样满足啊,接下来还有更复杂一些的曲线

    这里写图片描述

      没错,这个就是三阶的使用,有没有感觉路线更加复杂,不过还好,使用贝塞尔去玩完全可以轻松实现;对了,还有一个心在沿着曲线移动,看到这里,小伙伴们肯定会想到满屏幕的心在飞的场景,放心,这个我也实现了,在接下来的文章里,我会一一进行讲解;

    这里写图片描述

    图片看完了,现在简单了解贝塞尔曲线

    Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。

    以下公式中:B(t)为t时间下 点的坐标;

    P0为起点,Pn为终点,Pi为控制点

    一阶贝塞尔曲线(线段):

    这里写图片描述

    意义:由 P0 至 P1 的连续点, 描述的一条线段

    二阶贝塞尔曲线(抛物线):

    这里写图片描述

    原理:由 P0 至 P1 的连续点 Q0,描述一条线段。
    由 P1 至 P2 的连续点 Q1,描述一条线段。
    由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。

    经验:P1-P0为曲线在P0处的切线。

    三阶贝塞尔曲线:

    这里写图片描述

    通用公式:

    这里写图片描述

    利用贝塞尔曲线的这些特性,我们可以画出很多炫酷的曲线,所以贝塞尔曲线还是值得我们去研究学习的;

    但是这些完全记不住啊!!!

    没关系,可以很负责的说,我也是!!!!!

    上面的曲线完全是来自http://blog.csdn.net/tianhai110/article/details/2203572

    所以,如果你的数学和我一样是体育老师教的,就忘记这些吧,跟我一起看看android中是实现一条贝塞尔曲线的,android已经帮我们实现好了,剩下的就需要我们进行简单使用,具体的使用,就看下一篇中讲解

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

    展开全文
  • 贝塞尔曲线简单介绍

    千次阅读 多人点赞 2019-08-24 18:50:24
    什么是贝塞尔曲线? Bézier curve(贝塞尔曲线) 是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre B...

    什么是贝塞尔曲线?

    Bézier curve(贝塞尔曲线) 是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。
    贝塞尔曲线所依据的最原始的数学公式是 伯恩斯坦多项式。 简单来说,伯恩斯坦多项式可以用来证明,在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近,并且收敛性很强,也就是一致收敛。 就是一个连续函数,你可以将它写成若干个伯恩斯坦多项式相加的形式,并且,随着 n→∞,这个多项式将一致收敛到原函数,这个就是伯恩斯坦斯的逼近性质。
    到了1959年,当时就职于雪铁龙的法国数学家 Paul de Casteljau 开始对伯恩斯坦多项式进行了图形化的尝试,并且提供了一种数值稳定的德卡斯特里奥(de Casteljau) 算法。根据这个算法,就可以只通过很少的控制点,去生成复杂的平滑曲线,也就是贝塞尔曲线。
    而贝塞尔曲线的得名,得归功于1962年就职于雷诺的法国工程师皮埃尔·贝塞尔(Pierre Bézier),他使用这种方法来辅助汽车的车体工业设计,并且广泛宣传,因此大家才都称他为贝塞尔曲线 。
    Bezier曲线是应用于二维图形的曲线。曲线由顶点和控制点组成,通过改变控制点坐标可以改变曲线的形状。

    Bezier曲线拟合原理

    1.在平面内选3个不同线的点A、B、C并且依次用线段连接。如下所示:
    在这里插入图片描述2.在AB和BC上分别确定点D和点E,使得AD/AB = BE/BC成立:
    在这里插入图片描述3.连接DE,并在DE上找出一点F,使得DF/DE = AD/AB = BE/BC:
    在这里插入图片描述4.让选取的点D在第一条线段上从起点A,移动到终点B,找出所有点F,并将它们连起来。会得到一条非常光滑的曲线,即贝塞尔曲线。

    动画演示

    一次Bezier曲线公式:
    在这里插入图片描述
    在这里插入图片描述
    二次Bezier曲线公式:
    在这里插入图片描述
    在这里插入图片描述
    三次Bezier曲线公式:
    在这里插入图片描述
    在这里插入图片描述
    四次贝塞尔曲线动态演示:
    在这里插入图片描述
    五次贝塞尔曲线动态演示:
    在这里插入图片描述

    贝塞尔曲线的特点及用途

    对于贝塞尔曲线,最重要的点是数据点和控制点。
    数据点: 指一条路径的起始点和终止点。
    控制点:控制点决定了一条路径的弯曲轨迹

    根据控制点的个数,贝塞尔曲线被分为一阶贝塞尔曲线(0个控制点)、二阶贝塞尔曲线(1个控制点)、三阶贝塞尔曲线(2个控制点)等等。

    特点一:曲线通过始点和终点,并与特征多边形首末两边相切于始点和终点,中间点将曲线拉向自己。
    特点二:平面离散点控制曲线的形状,改变一个离散点的坐标,曲线的形状将随之改变(点对曲线具有整体控制性)。
    特点三:曲线落在特征多边形的凸包之内,它比特征多边形更趋于光滑。

    由于用计算机画图大部分时间是操作鼠标来掌握线条的路径,与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形,拿到鼠标想随心所欲的画图也不是一件容易的事。这一点是计算机万万不能代替手工的工作,所以到目前为止人们只能颇感无奈。使用贝塞尔工具画图很大程度上弥补了这一缺憾。

    贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度);移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意,贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。

    展开全文
  • 浅谈贝塞尔曲线

    千次阅读 2019-08-05 22:20:02
    前段时间做了一个手写板功能的东西,其中手写部分用二次贝塞尔曲线完成,今天就来总结一下贝塞尔曲线在Android中的应用,先简单介绍各阶贝塞尔曲线的原理,然后实现通过贝塞尔曲线实现波浪线功能,感兴趣的同学继续...

    浅谈贝塞尔曲线

    前段时间做了一个手写板功能的东西,其中手写部分用二次贝塞尔曲线完成,今天就来总结一下贝塞尔曲线在Android中的应用,先简单介绍各阶贝塞尔曲线的原理,然后实现通过贝塞尔曲线实现波浪线功能,感兴趣的同学继续看下去吧!

    概念

    在数学的数值分析领域中,贝塞尔曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝兹曲面,其中贝兹三角是一种特殊的实例。

    贝塞尔曲线于1962年,由法国工程师皮埃尔·贝兹(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由保尔·德·卡斯特里奥于1959年运用德卡斯特里奥算法开发,以稳定数值的方法求出贝塞尔曲线。

    贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,通过一定方式绘制的贝塞尔曲线形状会发生变化。根据方程的最高阶数,又分为线性贝赛尔曲线,二阶贝塞尔曲线、三阶贝塞尔曲线和高阶贝塞尔曲线。

    线性贝塞尔曲线

    一阶贝塞尔曲线有两个点,一个是贝塞尔曲线的起点,一个是曲线的终点,主要就是画一条线段

    线性贝塞尔曲线函数中的t会经过由P0至P1的B(t)所描述的曲线。例如当t=0.25时,B(t)即一条由点P0至P1路径的四分之一处。就像由0至1的连续t,B(t)描述一条由P0至P1的直线。

    一阶

    二阶贝塞尔曲线

    二阶贝塞尔曲线有三个点,一个是贝塞尔曲线的起点,一个是曲线控制点,一个是曲线终点,主要就是用来画不是很复杂的曲线,例如上面说的手写板功能,使用的就是二阶贝塞尔曲线

    为建构二次贝塞尔曲线,可以中介点Q0和Q1作为由0至1的t:

    • 由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。
    • 由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。
    • 由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。

    二阶

    p0是起始点,p1是控制点,p2是终点

    三阶贝塞尔曲线

    P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P2之前,走向P1方向的“长度有多长”。

    对于三次曲线,可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2,和由二次曲线描述的点R0、R1所建构:

    在这里插入图片描述
    三阶

    高阶贝塞尔曲线

    在这里插入图片描述

    不管是几阶,原理都一样,感兴趣的可以自己证明一下这个原理,下面给出四阶的原理图
    在这里插入图片描述
    高阶

    贝塞尔曲线在android中的应用

    贝塞尔曲线在android中主要用于各种自定义view,主要是实现曲线更平滑,例如上面说的手写板,波浪线等等,在Android中用的最多的是二阶和三阶贝塞尔曲线,下面我们一起用二阶贝塞尔曲线写一个实例了解一下在Android中的用法,最后附上贝塞尔曲线实现水波纹效果

    二阶贝塞尔曲线:

    quadTo(x1,y1,x2,y2)
    
    • x1:控制点x坐标
    • y1:在控制点y坐标
    • x2:终点x坐标
    • y2:终点y坐标
    rQuadTo(dx1,dy1,dx2,dy2)
    
    • dx1:控制点相对起点的x位移
    • dy1:控制点相对起点的y位移
    • dx2:终点相对起点的x位移
    • dy2:终点相对起点的y位移

    在这里插入图片描述

    public class SecondOrderBezierView extends View {
    
        Path mPath;
        Paint mPaint;
        Paint mLinePaint;
    
    
        float centerX, centerY;
        float mX, mY;
    
        float startX, startY;
        float endX, endY;
    
        public SecondOrderBezierView(Context context) {
            super(context);
            init();
        }
    
        public SecondOrderBezierView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        void init() {
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setStrokeWidth(10f);
            mPaint.setStyle(Paint.Style.STROKE);
    
            mLinePaint = new Paint();
            mLinePaint.setAntiAlias(true);
            mLinePaint.setColor(Color.GRAY);
            mLinePaint.setStrokeWidth(2f);
            mLinePaint.setStyle(Paint.Style.STROKE);
    
            mPath = new Path();
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            centerX = w/2;
            centerY = h/2;
            startX = centerX-250;
            startY = centerY;
            endX = centerX + 250;
            endY = centerY;
            mX = centerX;
            mY = centerY - 500;
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
    
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    mX = event.getX();
                    mY = event.getY();
                    break;
            }
            invalidate();
            return true;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.reset();
            mPath.moveTo(startX, startY);
            mPath.quadTo(mX, mY, endX, endY);
    
            canvas.drawPath(mPath, mPaint);
            canvas.drawLine(startX, startY, mX, mY, mLinePaint);
            canvas.drawLine(mX, mY, endX, endY, mLinePaint);
        }
    }
    

    三阶贝塞尔曲线

    cubicTo(float x1, float y1, float x2, float y2,
                        float x3, float y3)
    
    • x1, y1控制点1的坐标
    • x2, y2控制点2的坐标
    • x2, y2终点的坐标
    rCubicTo(float x1, float y1, float x2, float y2,
                         float x3, float y3)
    
    • x1, y1控制点1相对于起点的位置
    • x2, y2控制点2相对于起点的位置
    • x2, y2终点相对于起点的位置

    实例省略,跟二阶贝塞尔曲线差不多,多了一个控制点

    学习了贝塞尔曲线,下面来实际操作一下

    一起实现波浪效果,首先先画出基本的波浪形状,起点,控制点,终点确定之后先画出一段的波浪线,再修改起点,终点,控制点画第二段波浪线

    mPath.moveTo(startX, startY);
    mPath.quadTo(mX, mY, centerX, centerY);
    mPath.quadTo(centerX * 3 / 2, centerY + 300, endX, endY);
    

    然后通过修改Paint的Style为FILL_AND_STROKE,通过path的lineto把下面部分填充

    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    
    mPath.lineTo(2 * centerX, 2 * centerY);
    mPath.lineTo(0, 2 * centerY);
    

    在这里插入图片描述

    最后通过动画让波浪动起来, 说明由于使用的平移动画,所以需要在屏幕外多画一个完整的波浪线

    demo仅供参考,当然也可以通过其他方式实现

    public class WaveView extends View {
    
        Paint mPaint;
        Path mPath;
    
        float mX, mY, centerX, centerY, startX, startY, endX, endY;
        int waveCount, waveLength, mOffsetX;
        ValueAnimator mValueAnimator;
    
        public WaveView(Context context) {
            super(context);
            init();
        }
    
        public WaveView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        private void init() {
    
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            mPaint.setStrokeWidth(10f);
            mPaint.setColor(Color.RED);
    
            mPath = new Path();
    
            waveLength = 800;
    
            startWave();
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            waveLength = w;
            centerX = w / 2;
            centerY = h / 2;
            startX = 0;
            startY = centerY;
            endX = w;
            endY = centerY;
    
            mX = centerX / 2;
            mY = centerY - 300;
    
            waveCount = (int) Math.round(w / waveLength + 1.5);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.reset();
            mPath.moveTo(-waveLength + mOffsetX, centerY);
            for (int i = 0; i < waveCount; i++) {
                mPath.rQuadTo(waveLength / 4, -100, waveLength / 2, 0);
                mPath.rQuadTo(waveLength / 4, +100, waveLength / 2, 0);
            }
    
            mPath.lineTo(2 * centerX, 2 * centerY);
            mPath.lineTo(0, 2 * centerY);
            mPath.close();
            canvas.drawPath(mPath, mPaint);
        }
    
        void startWave() {
            mValueAnimator = ValueAnimator.ofInt(0, waveLength);
            mValueAnimator.setDuration(1000);
            mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mValueAnimator.setInterpolator(new LinearInterpolator());
            mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    mOffsetX = (int) valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });
            mValueAnimator.start();
        }
    }
    

    参考文献

    贝塞尔曲线

    下面是我的公众号,不定时发送文章,欢迎关注

    子墨公众号

    展开全文
  • 贝塞尔曲线扫盲

    万次阅读 多人点赞 2015-09-15 15:46:09
    贝塞尔曲线扫盲 相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。但是,可能并不是每位同学都清楚地知道,到底什么是“贝塞尔曲线”,又是什么特点让它有这么高的知名度。 贝塞尔曲线...
  • 贝塞尔曲线基础使用

    千次阅读 2018-05-25 20:03:57
    贝塞尔曲线于1962由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。现在贝塞尔曲线在计算机图形学领域也是一个相当重要的参数曲线,很多画图工具软件都包含贝塞尔...
  • 贝塞尔曲线 总结

    千次阅读 2012-08-08 10:18:08
    Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究...
  • 贝塞尔曲线

    2019-05-27 20:32:08
    RT,马三最近在参与一款足球游戏...最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理学公式手动计算位置和物体速度的方式实现,现在这个版本中使用的是DoTween+贝塞尔曲线...
  • 贝塞尔曲线理论

    千次阅读 2018-10-02 15:58:25
    贝塞尔曲线(Cubic Bezier Curve) 贝塞尔曲线使用4个控制点 P1,P2,P3,P4P_1,P_2,P_3,P_4P1​,P2​,P3​,P4​来控制曲线的形状 其中曲线通过P1(begin),P4(end)P_1(begin),P_4(end)P1​(begin),P4​(end) 点,接近但不...
  • 1. 定义 贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用...贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。 贝塞...
  • 贝塞尔曲线生成算法

    万次阅读 2010-08-25 14:34:00
    该曲线分为一次/二次/三次/多次贝塞尔曲线,之所以这么分是为了更好的理解其中的内涵。一次贝塞尔曲线,实际上就是一条连接两点的直线段。二次贝塞尔曲线,就是两点间的一条抛物线,利用一个控制点来控制抛物线的...
  • canvas贝塞尔曲线代码在线生成工具 可以快速生成二次、三次贝塞尔曲线的源码生成器,方便经常使用到canvas画图的同学使用,可以直接预览效果随意画出自己想要的图像。 生成源码效果预览: canvas = ...
  • 针对三阶贝塞尔曲线拟合圆弧,进行一般性的公式求解,可以表达如下图所示: 通过圆心O作出半径为1的圆弧A到D,作AB为和CD为圆弧的切线段,长度均为h。 这样,以A、B、C和D作为三阶贝塞尔曲线的控制点,求得使曲线的...
  • 贝塞尔曲线拟合原理

    万次阅读 2017-01-13 18:12:54
    1.什么是贝塞尔曲线贝塞尔曲线所依据的最原始的数学公式,是早在1912年就广为人知的伯恩斯坦多项式。简单来说,伯恩斯坦多项式可以用来证明,在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近,并且收敛性很...
  • 贝塞尔曲线介绍及一阶、二阶推导

    千次阅读 2018-05-25 14:59:54
    简介说明贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,当时主要用于汽车主体设计。 通过比例进行不断地取点,点不断地汇成一条平滑的曲线。 ...
  • 贝塞尔曲线拟合 Matlab 实现

    千次阅读 2016-12-11 15:40:28
    % 生成n-1次贝塞尔曲线,其中x和y是n个点的坐标 %h=bezier(x,y) % 生成n-1次贝塞尔曲线并返回曲线句柄 %[X,Y]=bezier(x,y) % 返回n-1次贝塞尔曲线的坐标 %例子: %bezier([5,6,10,12],[0 5 -5 -2])
  • Android 绘图贝塞尔曲线简单使用

    万次阅读 2016-07-13 13:41:56
    Android 绘图贝塞尔曲线简单使用在Android中某些自定义View的时候需要绘制某些曲线,这时候贝塞尔曲线就登场了。我们不用深入了解贝塞尔曲线的详细信息,我们的最终目的还是需要学会如何使用。贝塞尔曲线分为3种,...
  • Unity游戏中使用贝塞尔曲线

    万次阅读 2015-08-18 09:08:15
    目的:这篇文章的主要目的是要给你关于在游戏如何使用贝塞尔曲线的基本想法。 贝塞尔曲线是最基本的曲线,一般用在计算机 图形学和 图像处理。贝塞尔曲线可以用来创建平滑的曲线的道路、 弯曲的路径就像 祖玛游戏、 ...
  • 三阶贝塞尔曲线被广泛用于各种需要平滑曲线的设计领域,一般通过多段三阶贝塞尔曲线顺次连接,构成复杂贝塞尔曲线。 每一段三阶贝塞尔曲线由均由两个端点和两个句柄点,一共四个控制点进行控制,其中每个控制点的...
  • 三次贝塞尔曲线画圆的方法。

    万次阅读 2015-07-20 10:26:13
    上一篇说的仿58同城loadingview的项目,中有一个利用贝塞尔曲线进行绘制圆的步骤,这个贝塞尔曲线理论挺复杂,特此单独说一下所知的和能用到的。 比如上一个loadingView的项目中,要用到Path.cubic()来使用贝塞尔...
1 2 3 4 5 ... 20
收藏数 19,721
精华内容 7,888
关键字:

贝塞尔曲线