mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-09-03 05:12:43 +02:00
fd6a63e067
* Added zh-CN translation of chapter "components" * Update content.zh-CN.md Co-authored-by: Pomax <pomax@nihongoresources.com>
14 lines
1.6 KiB
Markdown
14 lines
1.6 KiB
Markdown
# 分量函数
|
||
|
||
当人们开始在自己的程序中使用贝塞尔曲线时，首先遇到的问题之一是：“我虽然知道怎么画曲线，但是怎么确定包围盒？”其实做法颇为直接，但需要知道如何利用一些数学知识得到所需的值。对于包围盒而言，所需的其实并不是曲线本身，而只是曲线的“极值”——曲线的x轴和y轴分量的最小值和最大值。如果还记得微积分的话（前提是学过微积分，否则更难记），那么函数的极值可以用函数的一阶导数所确定，但由于“曲线函数”有不只一个分量，这就产生了一个问题——每个分量都有自己的函数。
|
||
|
||
解决办法：对每个分量分别计算导数，再按照原来的分量顺序重新拼在一起。
|
||
|
||
以下演示参数化的贝塞尔曲线如何“分解”为两个正常的函数，一个对应于x轴，一个对应于y轴。注意左侧的图像依然是可交互的曲线，但没有标出坐标轴（坐标显示在图中）；中间和右侧的图像是分量函数，分别对应于指定*t*值（介于0和1之间，含端点）后求出的x轴和y轴分量。
|
||
|
||
如果水平移动曲线上的点，那么应当只有中间的图像在变化；同样，如果竖直移动曲线上的点，那么应当只有右侧的图像在变化。
|
||
|
||
<graphics-element title="二次贝塞尔曲线的分量" width="825" src="./components.js" data-type="quadratic"></graphics-element>
|
||
|
||
<graphics-element title="三次贝塞尔曲线的分量" width="825" src="./components.js" data-type="cubic"></graphics-element>
|