哪些是+joomla做的网站,网站后台seo优化如何做,一亩地开发多少钱,手机微网站价贝塞尔曲线的公式推导#xff0c;和 SVG 中 Path 的贝塞尔曲线指令的理解记忆 贝塞尔曲线可视化#xff1a;cubic-bezier.com/#.17,.67,.8… SVG Path 编辑器: yqnn.github.io/svg-path-ed… 知乎转 YouTube 的视频地址: www.zhihu.com/zvideo/1574… 张鑫旭老师#xff1a;…贝塞尔曲线的公式推导和 SVG 中 Path 的贝塞尔曲线指令的理解记忆 贝塞尔曲线可视化cubic-bezier.com/#.17,.67,.8… SVG Path 编辑器: yqnn.github.io/svg-path-ed… 知乎转 YouTube 的视频地址: www.zhihu.com/zvideo/1574… 张鑫旭老师SVG 的贝塞尔曲线指令 www.zhangxinxu.com/wordpress/2… 贝塞尔曲线的公式推导
1. 线性贝塞尔曲线
这个是最基础的运动形成的曲线其实就是直线。 个人理解
求出 P 的位置与 t 之前的关系。 P 是运动的向量的位置 t 是运动的时间。
第一步明确几个定义有两个点 P0 和 P1 构成一条直线。
然后有第三个点 P 点 P 在 P0 和 P1 构成的线段上运动运动时间为 t .
那么点 P 的位置在 t 时间运动的路径就是贝塞尔曲线。
那么在坐标系中用向量这样表示 这里有两个向量 P0 和 P1 然后还有在 P0 到 P1 上根据时间 t 运动的向量 P 。
那么如何求出 P 的位置。 这里很好理解不做过多解释。其实第一行公式就不复杂也很好理解没有必要化简。但是化简的目的是为了在公式上更直观体现 P 与 (P0 和 P1) 之间的关系。
综上P(t) (1-t)P0 tP1
这里简化表示lerp(P0, P1, t) 用 lerp 表示之间的关系。 2. 二次方贝塞尔曲线 其实相比于上一步的 线性贝塞尔曲线 推导二次方贝塞尔曲线就是多增加了一个向量点。
个人理解
这里首先还是要明确已知的是三个向量 P0 、 P1 、 P2 和时间 t 。所要求导的是点 P 的位置与时间的关系。
原来的两个向量点 P0 和 P1 现在多增加一个 P2 。然后 P0 和 P1 之间有个向量 P01 随着 t 发生位置改变 P1 和 P2 之间有个向量 P12 也是随着 t 发生位置改变。
这里其实就是两个线性贝塞尔曲线。
由上一步的 线性贝塞尔曲线 推导我们能知道
P01 (1-t)P0 tP1 lerp(P0, P1, t)
P02 (1-t)P1 tP2 lerp(P1, P2, t)
这样 P01 和 和 P02 的位置就由已知的变量推导转换了但是到目前 P 还未出场。
那么 P 的位置其实就是在 P01 和 P02 这两个向量之间。
就是可以把当前 P01 当做线性贝塞尔曲线的第一个点 P02 是第二个点 t 还是刚才的那个时间而 P 的位置则是随着时间在 P01 和 P02 上运动。
那么这个时候就可以得出 P :
P (1-t)P01 tP12 lerp(P01, P12, t)
这里看最初始的计算
P(t) (1-t)P01 tP12 (1-t)((1-t)P0 tP1) t((1-t)P1 tP2) (1-t)^2 * P0 (1-t) * t * P1 t * (1-t)*P1 t^2 * P2 (1-t)^2 * P0 2t(1-t)P1 t^2 * P2
也是这样简化表达
P(t) lerp(P01, P12, t) lerp(lerp(P0, P1, t), lerp(P1, P2, t), t)
3. 三次方贝塞尔曲线 三次贝塞尔曲线其实跟上面同理多一个向量点 P3 这里就不赘述了直接推导。
这里点太多了所以除了四个已知的向量点 P1 、 P2 、 P3 、 P4 其余的几个暂时的点用 ABCDEF 表示如上图。
A lerp(P0, P1, t) B lerp(P1, P2, t) C lerp(P2, P3, t) D lerp(A, B, t) E lerp(B, C, t) P lerp(D, E, t)
当然我们需要的是 P 和 P1 、 P2 、 P3 、 P4 以及 t 之间的关系这里化简暂时省略了。
也可以直接写出所有点的数学公式
A (1-t)P0 tP1 B (1-t)P1 tP2 C (1-t)P2 tP3 D (1-t)A tB E (1-t)B tC P (1-t)D tE
将其完全展开并化简得
P(t) P0( -t^3 3t^2 - 3t 1 ) P1( 3 * t^3 - 6 * t^2 3t) P2( -3 * t^3 3 * t^2 ) P3( t^3 )
综上推导其实多次方的贝塞尔曲线始终是其低一级的曲线的 线性贝塞尔曲线。
在求导数的时候可视化看出来知道导数的方向与其垂直的 90 度也就是与曲线的相切的方向。
而在一阶导数的推导的时候其实可以看出就是点的速度。 二阶导数就是点的速度的变化率那就是加速度。 三维导数就是加速度的变化率。
其实也就是曲率。
K (det( P, p)) / ||P||^3
SVG 路径 Path 的贝塞尔曲线
在 SVG 中的 Path 使用贝塞尔曲线从张鑫旭老师的文章中学到的记忆方法 “切图组合”和“厕所组合”。
从字面上理解切图主要是在图是二维的事情所以对应是二维贝塞尔曲线。 厕所是三维世界的所以对应的是三维贝塞尔曲线。
还有就是命令的对应由上面可知二维贝塞尔曲线有三个点三维贝塞尔曲线有四个点。
1. 二维贝塞尔曲线切图组合 Q
在 SVG 中二维贝塞尔曲线对应的指令和参数是虚实 因为是曲线只显示两个点所以好理解的是显示第一个和第四个点。中间的都是控制点不显示。 而二维贝塞尔曲线的第一个点是前面的点前面的点肯定不受这里影响肯定会显示。然后最后一个点也肯定是显示所以在二维贝塞尔曲线的指令中的两个坐标中的第一个是控制点不会实际显示第二个是真实点会显示。 Q x1 y1, x y
这里只有两个点分别是第二个点和第三个点第一个点使用的是前面的那个点。比如
M 0 10 Q 5 5 , 10 10 这里贝塞尔曲线第一个点也就是起始点是 0 10 第二个点是 5 5 第三个点是 10 10 。
2. 三维贝塞尔曲线厕所组合 C
在 SVG 中三维贝塞尔曲线对应的指令和参数是虚虚实
C x1 y1, x2 y2, x y
这里有三个点跟上面同理第一个点使用的是之前的坐标这里的三个分别是第二、三、四点。 在 SVG 中因为是曲线只显示两个点所以其四个点对应的也是显示、不显示、不显示、显示。
而针对三维贝塞尔曲线的指令更好理解的是第一个点使用的是前面的那个点前面的点肯定不受这里影响肯定会显示。最后一个点也是会显示所以中间的两个点是不显示的控制点。
示例
M 0 10 C 0 7 10 13 10 10
来自贝塞尔曲线的公式推导贝塞尔曲线的公式推导和 SVG 中 Path 的贝塞尔曲线指令的理解记忆。P(t) (1-t) - 掘金 https://juejin.cn/post/7282666723902292023
