mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-22 16:23:12 +02:00
39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
# 分割曲线
|
|
|
|
使用 de Casteljau 算法我们也可以将一条贝塞尔曲线分割成两条更小的曲线，二者拼接起来即可形成原来的曲线。当采用某个 `t` 值构造 de Casteljau 算法时，该过程会给到我们在 `t` 点分割曲线的所有点: 一条曲线包含该曲线上点之前的所有点，另一条曲线包含该曲线上点之后的所有点。
|
|
|
|
<Graphic title="分割一条曲线" setup={this.setupCubic} draw={this.drawSplit} />
|
|
|
|
<div className="howtocode">
|
|
|
|
### 分割曲线的代码实习
|
|
|
|
通过在 de Casteljau 函数里插入一些额外的输出代码，我们就可以实现曲线的分割：
|
|
|
|
```
|
|
left=[]
|
|
right=[]
|
|
function drawCurve(points[], t):
|
|
if(points.length==1):
|
|
left.add(points[0])
|
|
right.add(points[0])
|
|
draw(points[0])
|
|
else:
|
|
newpoints=array(points.size-1)
|
|
for(i=0; i<newpoints.length; i++):
|
|
if(i==0):
|
|
left.add(points[i])
|
|
if(i==newpoints.length-1):
|
|
right.add(points[i+1])
|
|
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
|
drawCurve(newpoints, t)
|
|
```
|
|
|
|
对某个给定 `t` 值，该函数执行后，数组 `left` 和 `right` 将包含两条曲线的所有点的坐标 -- 一条是`t`值左侧的曲线，一条是`t`值右侧的曲线， 与原始曲线同序且完全重合。
|
|
|
|
</div>
|
|
|
|
以下是带动画效果的最好的演示（点击以播放/暂停）：
|
|
|
|
<Graphic title="贝塞尔曲线的分割" setup={this.setupCubic} draw={this.drawAnimated} onClick={this.togglePlay} />
|