• 【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )



    贝塞尔曲线参考 : https://github.com/venshine/BezierMaker





    一、二阶贝塞尔曲线公式



    请添加图片描述

    二阶贝塞尔曲线公式如下 :

    B ( t ) = ( 1 − t ) 2 P 0 + 2 t ( 1 − t ) P 1 + t 2 P 2 , t ∈ [ 0 , 1 ] B(t) = (1- t)^2P_0 + 2t(1-t)P_1 + t^2P_2, t \in [0,1] B(t)=(1t)2P0+2t(1t)P1+t2P2,t[0,1]

    P 0 , P 1 , P 2 P_0 , P_1 , P_2 P0,P1,P2 是给定的 平面中的 3 3 3 个点 , P 0 P_0 P0 是 曲线起始点 , P 2 P_2 P2 是 曲线结束点 , P 1 P_1 P1 是控制点 ;

    t t t 的取值范围是 0.0 0.0 0.0 ~ 1.0 1.0 1.0 ;





    二、三阶贝塞尔曲线



    请添加图片描述

    上图中 , P 0 P_0 P0 点是起始点 , P 3 P_3 P3 点是终止点 , P 1 P_1 P1 P 2 P_2 P2 点是控制点 ;


    三阶贝塞尔曲线公式如下 :

    B ( t ) = ( 1 − t ) 3 P 0 + 3 t ( 1 − t ) 2 P 1 + 3 t 2 ( 1 − t ) P 2 + t 3 P 3 , t ∈ [ 0 , 1 ] B(t) = (1- t)^3P_0 + 3t(1-t)^2P_1 + 3t^2(1-t)P_2 + t^3P_3, t \in [0,1] B(t)=(1t)3P0+3t(1t)2P1+3t2(1t)P2+t3P3,t[0,1]


    先根据比例 , 绘制出 P 0 P_0 P0 P 2 P_2 P2 之间的二阶贝塞尔曲线 , 以 P 1 P_1 P1 为控制点 , 绘制出直线 A B AB AB ;

    然后 绘制 P 1 P_1 P1 P 3 P_3 P3 之间的二阶贝塞尔曲线 , 以 P 2 P_2 P2 为控制点 , 绘制出直线 B C BC BC ;

    最后 计算 A A A C C C 之间的 二阶贝塞尔曲线 , 以 B B B 点作为 控制点 ;

    在这里插入图片描述

    三阶贝塞尔曲线动态绘制流程 :
    请添加图片描述





    三、高阶贝塞尔曲线



    B ( t ) = ∑ i = 0 n ( n i ) P i ( 1 − t ) n − i t i B(t) = \sum_{i = 0}^{n} \dbinom{n}{i} P_i (1-t)^{n - i}t^i B(t)=i=0n(in)Pi(1t)niti

    = ( n 0 ) P 0 ( 1 − t ) n t 0 + ( n 1 ) P 1 ( 1 − t ) n − 1 t 1 + ⋯ = \dbinom{n}{0} P_0 (1-t)^{n}t^0 + \dbinom{n}{1} P_1 (1-t)^{n - 1}t^1 + \cdots =(0n)P0(1t)nt0+(1n)P1(1t)n1t1+

    + ( n n − 1 ) P n − 1 ( 1 − t ) 1 t n − 1 + ( n n ) P n ( 1 − t ) 0 t n , t ∈ [ 0 , 1 ] + \dbinom{n}{n-1} P_{n-1} (1-t)^{1}t^{n -1} + \dbinom{n}{n} P_n (1-t)^{0}t^n , t \in [0,1] +(n1n)Pn1(1t)1tn1+(nn)Pn(1t)0tn,t[0,1]

    上述公式中 i i i 是贝塞尔曲线的阶数 ;


    四阶贝塞尔曲线 :

    请添加图片描述


    五阶贝塞尔曲线 :

    请添加图片描述


  • 相关阅读:
    Flash、eeprom、rom、ram
    mongodb 无法远程连接
    28.CSS 渐变圆文本动画
    centos7——OpenSSH.7.4升级OpenSSH 8.9
    MFC:自绘CListBox,GetText返回一个乱码
    Log4j有哪几种日志级别呢?
    从国产低代码龙头企业零赛云看零(低)代码在软件开发行业和工业企业的应用趋势
    【AI作画】使用stable-diffusion-webui搭建AI作画平台
    HCIP实验6
    【消息队列笔记】chp1-消息队列的使用场景
  • 原文地址:https://blog.csdn.net/han1202012/article/details/125915230