700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【Android UI】贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )

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

时间:2022-10-30 08:59:16

相关推荐

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

文章目录

一、一阶贝塞尔曲线二、二阶贝塞尔曲线

贝塞尔曲线参考 :/venshine/BezierMaker

一、一阶贝塞尔曲线

一阶贝塞尔曲线 本质 是一条直线 , 下图是 一阶贝塞尔曲线 , P0P_0P0​ 是曲线开始位置 , 逐个点向 P1P_1P1​ 绘制 ;

二、二阶贝塞尔曲线

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

下图中 由 P0P_0P0​ 向 P2P_2P2​ 绘制 二阶贝塞尔曲线 , 控制点是 P1P_1P1​ ;

由 P0P_0P0​ 点绘制一条曲线到 P2P_2P2​ 点 , 绘制该曲线时 , 有一个控制点 P0P_0P0​ , 相当于 将曲线向 " 控制点 P0P_0P0​ " 方向拖动 , 产生一条圆滑的弧线 ;

上述绘制的 弧线 , 是通过计算得来的 , 绘制 P0P_0P0​ 到 P2P_2P2​ 的弧线 , 中间引入一个控制点 P1P_1P1​ ,

首先由 起始点 P0P_0P0​ 与 控制点 P1P_1P1​ 进行连线 ,

然后由 控制点 P1P_1P1​ 与 结束点 P2P_2P2​ 进行连线 ,

P0P_0P0​ 到 P1P_1P1​ 可以认为是 一阶贝塞尔曲线 , P1P_1P1​ 到 P2P_2P2​ 也可以认为是 一阶贝塞尔曲线 ,由 起始点 P0P_0P0​ 与 控制点 P1P_1P1​ 连线的这条线开始进行控制 ,在 起始点 P0P_0P0​ 与 控制点 P1P_1P1​ 连线上找到一个 比例值 xxx ( 取值范围 0−1.00 - 1.00−1.0 ) , 找到 xxx 比例所处的点 AAA , 同时在 控制点 P1P_1P1​ 与 结束点 P2P_2P2​ 连线上 , 找到一个 比例值 xxx 对应的点 BBB , 将 ABABAB 两个点进行连线 , 贝塞尔曲线上绘制的点 , 是 在 ABABAB 连线上的 xxx 比例所在位置 , 绿色的点 CCC 就是贝塞尔曲线要绘制的位置 ;

上述计算过程中的比例 :

P0AP0P1=P1BP1P2=ACAB\cfrac{P_0 A}{P_0 P_1} = \cfrac{P_1 B}{P_1 P_2} = \cfrac{AC}{AB}P0​P1​P0​A​=P1​P2​P1​B​=ABAC​

其中 P0AP_0 AP0​A 表示 P0P_0P0​ 点到 AAA 点的线段长度 , P0P1P_0 P_1P0​P1​ 表示 P0P_0P0​ 点到 P1P_1P1​ 点的线段长度 ;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。