美文网首页初见
贝塞尔曲线的几个知识点

贝塞尔曲线的几个知识点

作者: Eugene_iOS | 来源:发表于2020-02-26 20:09 被阅读0次
    n次贝塞尔曲线 t∈[0,1]

    * 贝塞尔曲线知识点:

    1、贝塞尔曲线(Bézier curve)又被称为贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线,它的数学基础是伯恩斯坦多项式(Bernstein polynomial,since 1912),在1959年法国数学家Paul de Casteljau提出了数值稳定的de Casteljau算法,开始贝塞尔曲线的图形化应用研究。

    2、贝塞尔曲线的名称来源于一位就职于雷诺的法国工程师Pierre Bézier,他在1962年开始对贝塞尔曲线做了广泛的宣传,他使用这种只需要很少的控制点就能生成复杂平滑曲线的方法来进行汽车车体的工业设计。

    3、Bezier曲线的递推算法"de Casteljau算法":


    🌰例子如下:
    在向量P0_P1上选择一个点P,使得P分隔向量P0_P1为t和1 - t(即 |P0_P | : |P0_P1| = t)。给定点P0_P1的坐标以及t(t∈[0,1])的值,点P的坐标则为P(t) = P0 + (P1 - P0) * t = (1 - t) * P0 + t * P1。


    de Casteljau算法原理

    4、定点:曲线的起始点结束点统称为定点


    * 获取贝塞尔曲线上的任意点

    👇一次贝塞尔曲线:
    一次贝塞尔曲线 t∈[0,1]
    /// 求一次贝塞尔曲线上任意一点的坐标
    /// 公式:B(t) = P0 + t * (P1 - P0) = (1 - t) * P0 + t * P1, t ∈ [0,1]
    /// @param t 曲线长度比例(所求"点"在曲线上的轨迹与整个轨迹长度的百分比)
    /// @param p0 起始点  Start Point
    /// @param p1 终止点  End Point
    /// @return t对应的点
    - (CGPoint)calculateBezierPointForLinearWithT:(CGFloat)t point0:(CGPoint)p0 point1:(CGPoint)p1 { 
        CGPoint point = CGPointZero;
        float temp = 1 - t;
        point.x = temp * p0.x + t * p1.x;
        point.y = temp * p0.y + t * p1.y;
        return point;
    }
    
    /// 求一次贝塞尔曲线上任意一点的坐标, 也可以使用点斜率计算获取
    CGPoint startPoint = p0;// 直线的起点
    CGPoint endPoint = p1;// 直线的终点
    CGFloat x = xAxis;// 直线上某点x坐标
    // 得到两点后,直线方程求解,从而求出直线斜率;通过点斜式计算得出“折线”上X点对应Y点。点斜式公式:y-y1 = k(x - x1)
    CGFloat k = (endPoint.y - startPoint.y) / (endPoint.x - startPoint.x);
    CGFloat y = k *(x - startPoint.x) + startPoint.y;
    return CGPointMake(x, y);
    
    👇二次贝塞尔曲线:
    二次贝塞尔曲线 t∈[0,1]
    /// 求二次贝塞尔曲线上任意一点的坐标
    /// 公式:B(t) = (1 - t)^2 * P0 + 2 * t * (1 - t) * P1+ t^2 * P2, t ∈ [0,1] 
    /// @param t 曲线长度比例(所求"点"在曲线上的轨迹与整个轨迹长度的百分比)
    /// @param p0 起始点  Start Point
    /// @param p1 控制点1 Control Point
    /// @param p2  终止点  End Point
    /// @return t对应的点
    - (CGPoint)calculateBezierPointForCubicWithT:(CGFloat)t point0:(CGPoint)p0 point1:(CGPoint)p1 point2:(CGPoint)p2  {
        CGPoint point = CGPointZero;
        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;
    }
    
    👇三次贝塞尔曲线:
    三次贝塞尔曲线 t∈[0,1]
    /// 求三次贝塞尔曲线上任意一点的坐标
    /// 公式: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 起始点  Start Point
    /// @param p1 控制点1 Control Point
    /// @param p2 控制点2 Control Point
    /// @param p3 终止点  End Point
    /// @return t对应的点
    - (CGPoint)calculateBezierPointForCubicWithT:(CGFloat)t point0:(CGPoint)p0 point1:(CGPoint)p1 point2:(CGPoint)p2 point3:(CGPoint)p3 {
        CGPoint point = CGPointZero;
        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;
    }
    

    相关文章

      网友评论

        本文标题:贝塞尔曲线的几个知识点

        本文链接:https://www.haomeiwen.com/subject/haaqqhtx.html