【Android UI】贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )

举报
韩曙亮 发表于 2022/07/22 23:54:39 2022/07/22
【摘要】 文章目录 一、一阶贝塞尔曲线二、二阶贝塞尔曲线 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一、一阶贝塞尔曲线 ...


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





一、一阶贝塞尔曲线



一阶贝塞尔曲线 本质 是一条直线 , 下图是 一阶贝塞尔曲线 , P 0 P_0 P0 是曲线开始位置 , 逐个点向 P 1 P_1 P1 绘制 ;

请添加图片描述





二、二阶贝塞尔曲线



二阶贝塞尔曲线 需要在 一阶贝塞尔曲线 基础上 , 添加一个控制点 , 曲线的绘制受控制点影响 ;

下图中 由 P 0 P_0 P0 P 2 P_2 P2 绘制 二阶贝塞尔曲线 , 控制点是 P 1 P_1 P1 ;

请添加图片描述

P 0 P_0 P0 点绘制一条曲线到 P 2 P_2 P2 点 , 绘制该曲线时 , 有一个控制点 P 0 P_0 P0 , 相当于 将曲线向 " 控制点 P 0 P_0 P0 " 方向拖动 , 产生一条圆滑的弧线 ;

上述绘制的 弧线 , 是通过计算得来的 , 绘制 P 0 P_0 P0 P 2 P_2 P2 的弧线 , 中间引入一个控制点 P 1 P_1 P1 ,

在这里插入图片描述

  • 首先由 起始点 P 0 P_0 P0控制点 P 1 P_1 P1 进行连线 ,
    在这里插入图片描述

  • 然后由 控制点 P 1 P_1 P1结束点 P 2 P_2 P2 进行连线 ,

在这里插入图片描述

  • P 0 P_0 P0 P 1 P_1 P1 可以认为是 一阶贝塞尔曲线 , P 1 P_1 P1 P 2 P_2 P2 也可以认为是 一阶贝塞尔曲线 ,
  • 由 起始点 P 0 P_0 P0 与 控制点 P 1 P_1 P1 连线的这条线开始进行控制 ,
  • 在 起始点 P 0 P_0 P0 与 控制点 P 1 P_1 P1 连线上找到一个 比例值 x x x ( 取值范围 0 − 1.0 0 - 1.0 01.0 ) , 找到 x x x 比例所处的点 A A A , 同时在 控制点 P 1 P_1 P1 与 结束点 P 2 P_2 P2 连线上 , 找到一个 比例值 x x x 对应的点 B B B , A B AB AB 两个点进行连线 ,

在这里插入图片描述

  • 贝塞尔曲线上绘制的点 , 是 A B AB AB 连线上的 x x x 比例所在位置 , 绿色的点 C C C 就是贝塞尔曲线要绘制的位置 ;

在这里插入图片描述

上述计算过程中的比例 :

P 0 A P 0 P 1 = P 1 B P 1 P 2 = A C A B \cfrac{P_0 A}{P_0 P_1} = \cfrac{P_1 B}{P_1 P_2} = \cfrac{AC}{AB} P0P1P0A=P1P2P1B=ABAC

其中 P 0 A P_0 A P0A 表示 P 0 P_0 P0 点到 A A A 点的线段长度 , P 0 P 1 P_0 P_1 P0P1 表示 P 0 P_0 P0 点到 P 1 P_1 P1 点的线段长度 ;

文章来源: hanshuliang.blog.csdn.net,作者:韩曙亮,版权归原作者所有,如需转载,请联系作者。

原文链接:hanshuliang.blog.csdn.net/article/details/125769728

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。