0
点赞
收藏
分享

微信扫一扫

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


文章目录

  • ​​一、二阶贝塞尔曲线公式​​
  • ​​二、三阶贝塞尔曲线​​
  • ​​三、高阶贝塞尔曲线​​



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


一、二阶贝塞尔曲线公式


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

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

是给定的 平面中的 个点 , 是 曲线起始点 , 是 曲线结束点 ,

的取值范围是 ~






二、三阶贝塞尔曲线


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

上图中 , 点是起始点 , 点是终止点 ,



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



先根据比例 , 绘制出 之间的二阶贝塞尔曲线 , 以 为控制点 , 绘制出直线

然后 绘制 之间的二阶贝塞尔曲线 , 以 为控制点 , 绘制出直线

最后 计算 之间的 二阶贝塞尔曲线 , 以

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

三阶贝塞尔曲线动态绘制流程 :

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






三、高阶贝塞尔曲线


上述公式中



四阶贝塞尔曲线 :

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



五阶贝塞尔曲线 :

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




举报

相关推荐

0 条评论