精华内容
参与话题
问答
  • 1. 定义 贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用...贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。 贝塞...

    1. 定义

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

    贝塞尔曲线的一些特性:

    • 使用nn个控制点{P1,P2,...,Pn}\{P_1,P_2,...,P_n\}来控制曲线的形状
    • 曲线通过起始点P1P_1和终止点PnP_n,接近但不通过中间点P2P_2~Pn1P_{n-1}

    2. 直观理解

    Step 1. 在二维平面内选三个不同的点并依次用线段连接

    在这里插入图片描述

    Step 2. 在线段ABABBCBC上找到DDEE两点,使得ADDB=BEEC\frac{AD}{DB}=\frac{BE}{EC}

    在这里插入图片描述

    Step 3. 连接DEDE,并在DEDE上找到FF点,使其满足DFFE=ADDB=BEEC\frac{DF}{FE}=\frac{AD}{DB}=\frac{BE}{EC}(抛物线的三切线定理)

    在这里插入图片描述
    Step 4. 找出符合上述条件的所有点

    在这里插入图片描述
    上述为一个二阶贝塞尔曲线。同样的有nn阶贝塞尔曲线:

    曲线 图示
    一阶 在这里插入图片描述
    三阶 在这里插入图片描述
    四阶 在这里插入图片描述
    五阶 在这里插入图片描述

    3. 公式推导

    3.1 一次贝塞尔曲线(线性公式)

    定义:给定点P0P_0P1P_1,线性贝塞尔曲线只是一条两点之间的直线,这条线由下式给出,且其等同于线性插值:
    B(t)=P0+(P1P0)t=(1t)P0+tP1, t[0,1] B(t)=P_0+(P_1-P_0)t=(1-t)P_0+tP_1,\text{ } t\in[0,1]

    在这里插入图片描述

    其中,公式里的P0P_0P1P_1同步表示为其xxyy轴坐标。

    假设P0P_0坐标为(a,b)(a,b)P1P_1坐标为(c,d)(c,d)P2P_2坐标为(x,y)(x,y),则有:

    xacx=t1tx=(1t)a+tc(3-1) \frac{x-a}{c-x}=\frac{t}{1-t} \Rightarrow x=(1-t)a+tc \tag{3-1}

    同理有:

    ybdy=t1tx=(1t)b+td(3-2) \frac{y-b}{d-y}=\frac{t}{1-t} \Rightarrow x=(1-t)b+td \tag{3-2}

    于是可将(31)(32)(3-1) (3-2)简写为:

    B(t)=(1t)P0+tP1, t[0,1](3-3) B(t)=(1-t)P_0+tP_1 ,\text{ } t\in[0,1] \tag{3-3}

    3.2 二次贝塞尔曲线(二次方公式)

    定义:二次贝塞尔曲线的路径由给定点P0P_0P1P_1P2P_2的函数B(t)B(t)给出:
    B(t)=(1t)2P0+2t(1t)P1+t2P2, t[0,1] B(t)=(1-t)^{2} P_0+2t(1-t)P_1+t^2P_2,\text{ } t\in [0,1]

    在这里插入图片描述

    假设P0P1P_0P_1上的点为AAP1P2P_1P_2上的点为BBABAB上的点为CC(也即CC为曲线上的点。则根据一次贝塞尔曲线公式有:

    A=(1t)P0+tP1B=(1t)P1+tP2C=(1t)A+tB(3-4) \begin{array}{l} A=(1-t)P_0+tP_1 \\ B=(1-t)P_1+tP_2 \\ C=(1-t)A+tB \end{array} \tag{3-4}

    将上式中AABB带入CC中,即可得到二次贝塞尔曲线的公式:

    B(t)=(1t)2P0+2t(1t)P1+t2P2, t[0,1](3-5) B(t)=(1-t)^{2} P_0+2t(1-t)P_1+t^2P_2,\text{ } t\in [0,1] \tag{3-5}

    3.3 三次贝塞尔曲线(三次方公式)

    同理可得三次贝塞尔曲线公式:

    B(t)=(1t)3P0+3t(1t)2P1+3t2(1t)P2+t3P3, t[0,1](3-6) B(t)=(1-t)^{3} P_0+3t(1-t)^2P_1+3t^2(1-t)P_2+t^3P_3,\text{ } t\in [0,1] \tag{3-6}

    3.4 nn次贝塞尔曲线(一般参数公式)

    定义:给定点P0,P1,...,PnP_0,P_1,...,P_n,则nn次贝塞尔曲线由下式给出:
    在这里插入图片描述

    nn次贝塞尔曲线的公式可由如下递归表达:

    P0n=(1t)P0n1+tP1n1, t[0,1](3-7) P_0^n=(1-t)P_0^{n-1}+tP_1^{n-1},\text{ }t\in[0,1] \tag{3-7}

    进一步可以得到贝塞尔曲线的递推计算公式:

    Pik{Pi, k=0(1t)Pik1+tPi+1k1, k=1,2,...,n; i=0,1,...,nk P_i^k \begin{cases} P_i , \text{ } k=0 \\ (1-t)P_i^{k-1}+tP_{i+1}^{k-1} , \text{ } k=1,2,...,n; \text{ } i=0,1,...,n-k \end{cases}

    这就是德卡斯特里奥算法(De Casteljau’s algorithm)

    参考

    [1] https://www.jianshu.com/p/0c9b4b681724
    [2] https://www.jianshu.com/p/8f82db9556d2

    展开全文
  • 图形算法:贝塞尔曲线

    万次阅读 2016-11-03 10:28: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;
    }
    展开全文
  • 贝塞尔曲线公式推导原理

    千次阅读 2017-08-17 11:09:23
    贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔...
    1. 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。
    2. 曲线的核心定义:起始点、终止点(也称锚点)、控制点。
    3. 那么贝塞尔曲线公式是怎么推导出来的呢?原理是什么?
    4. 我认为理解贝塞尔曲线实现原理,对于ios,Android等实现界面变形酷炫动画很有帮助哦,比如说果冻效果,下拉刷新发射小火箭,购物车放入动画等等.
    5. 思考:iOS只给我们提供了最多三阶贝塞尔曲线的方法,那么我们是否能自己实现4阶,5阶...n阶呢?

         由于博客园markdown语法无法书写高数公式,我就手写了一下截图上来的,字迹不好请原谅,只是知识分享记录一下,如果有问题,请指正.

       


    为了更好的理解,如下贝塞尔曲线点位动画效果:

           

    一阶.gif

     


    二阶.gif

     


     三阶.gif

     


    四阶.gif

     


    五阶.gif

     

     

     以后的图片轮播是不是可以实现如下这样的效果呢?贝塞尔曲线秒杀.


    效果.gif

     

    展开全文
  • 贝塞尔曲线轨迹计算公式util

    千次阅读 2017-02-23 10:43:27
    package com.imooc.beziertest; import android.graphics.PointF; public class BezierUtil {  /** ... * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1] ... * @
    package com.imooc.beziertest;


    import android.graphics.PointF;


    public class BezierUtil {


        /**
         * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
         *
         * @param t  曲线长度比例
         * @param p0 起始点
         * @param p1 控制点
         * @param p2 终止点
         * @return t对应的点
         */
        public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
            PointF point = new PointF();
            float temp = 1 - t;
            point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
            point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
            return point;
        }


        /**
         * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
         *
         * @param t  曲线长度比例
         * @param p0 起始点
         * @param p1 控制点1
         * @param p2 控制点2
         * @param p3 终止点
         * @return t对应的点
         */
        public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
            PointF point = new PointF();
            float temp = 1 - t;
            point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
            point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
            return point;
        }
    }
    展开全文
  • 二次贝塞尔曲线公式及导函数

    千次阅读 2015-09-14 22:26:05
    二次贝塞尔曲线公式:B(t)=(1-t)2P0+2t(1-t)P1+t2P2,t∈[0,1]二次贝塞尔曲线导函数:y,=2((1-t)(P1-P0)+t(P2-P1))要让二次贝塞尔曲线过Pt点,则控制点应为Pc=2Pt-(P0+P2)/2两直线的斜率分别为K1、K2,则夹角θ有tan...
  • 用到贝塞尔曲线公式来计算出顶点,从而生成贝塞尔曲线。 /** * 生成四阶贝塞尔曲线定点数据 * @param p0 起始点 { x : number, y : number, z : number } * @param p1 控制点1 { x : number, y : numb...
  • n 阶贝塞尔曲线计算公式实现

    千次阅读 2018-05-11 10:17:15
    点击打开链接
  • n 阶贝塞尔曲线计算公式实现

    万次阅读 2017-05-30 12:07:29
    n 次贝塞尔曲线计算公式实现,从贝塞尔曲线的一般参数方程入手,找出变化规律,实现输入任意点的坐标,返回连接所有点的贝塞尔曲线上的指定个数的点的坐标。
  • 二次贝塞尔曲线公式

    2016-11-09 12:33:00
    n个数据点构成(n-1)次贝塞尔曲线,三个数据点构成二次贝塞尔曲线,二次贝塞尔曲线参数方程(1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2;曲线起点P0,终点P2,但一般不过P1点. 代入坐标后得到:参数方程:x = (...
  • 三阶贝塞尔曲线公式计算坐标

    千次阅读 2017-08-03 17:43:12
    1.ValueAnimator通过AnimatorSet去play ValueAnimator valueAnimator = getBesselAnimator(tempImageView, rankWidth, rankHeight); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.play(va
  • 1.了解贝塞尔曲线 这个在网上已经有很多资料了,本人也是查看许多资料了解以后才能着手利用公式算坐标数值。 2.了解UnityErditor和关于OnScreenGUI函数及部分类和部分API 这个是在编辑状态下绘制线条需要用到,...
  • 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔...
  • 贝塞尔曲线公式

    2016-01-25 16:13:00
    一阶贝塞尔曲线: P0为起点,Pn为终点,Pi为控制点 二阶贝塞尔曲线: 原理:由 P0 至 P1 的连续点 P3,描述一条线段。...求P5,P5 根据一阶贝塞尔曲线公式 公式1 P3点一样代入 公式...
  • 【Unity3D BezierCurve绘制曲线】使用贝塞尔曲线公式与LineRenderer绘制曲线形成路径需求效果图代码脚本Demo链接转载 需求 .动态添加(删除)路径点,通过两个以上的路径点来绘制曲线,删除点之后不影响其他点绘制...
  • 贝塞尔曲线公式,我是你爸爸

    千次阅读 2018-11-01 01:01:30
    贝塞尔公式,是在两点之间选择一个比例值的点,然后在对应的每条线上选出相同比例的点,在选出的两个点上再次选择相同比例的点,直到只剩下一个点,那么这个点就是当前比例的曲线点 解释: 比如由三个点构成的一个...
  • 文章目录1、什么是贝塞尔曲线2、常见贝塞尔曲线3、贝塞尔曲线通用公式3.1、贝塞尔曲线通用公式3.2、思路解析 1、什么是贝塞尔曲线   Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:...
  • 1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解。 2,贝塞尔曲线作用十分广泛,简单举几个的栗子:  QQ小...
  • 针对三阶贝塞尔曲线拟合圆弧,进行一般性的公式求解,可以表达如下图所示: 通过圆心O作出半径为1的圆弧A到D,作AB为和CD为圆弧的切线段,长度均为h。 这样,以A、B、C和D作为三阶贝塞尔曲线的控制点,求得使曲线的...
  • 贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。 贝塞尔曲线的一些特性: 使用 n n n个控制点 { P 1 , P 2 , . . . , P n } \{
  • 三阶贝塞尔曲线被广泛用于各种需要平滑曲线的设计领域,一般通过多段三阶贝塞尔曲线顺次连接,构成复杂贝塞尔曲线。 每一段三阶贝塞尔曲线由均由两个端点和两个句柄点,一共四个控制点进行控制,其中每个控制点的...

空空如也

1 2 3 4 5 ... 20
收藏数 2,838
精华内容 1,135
关键字:

贝塞尔曲线公式