第12天:如何使用SVG绘制三次贝塞尔曲线

863 阅读1分钟

当我们想要弯曲一条线时,二次贝塞尔曲线是很好的,但通常它不够灵活。使用三次贝塞尔曲线,我们不仅有一个控制点,而是两个。第一个控制点设置曲线的初始方向,第二个控制点定义曲线从哪个方向到达端点。

同样,让我们看一个例子,其中圆圈代表控制点。

[点击这里观看三次贝塞尔曲线的交互式演示](SVG Curves (hunormarton.github.io))。

如果控制点的方向与曲线前后的直线方向相匹配,则路径段之间有平滑过渡。

在此示例中,礼品盒的丝带使用三次贝塞尔曲线,该曲线平滑地延续前一条直线,然后返回到即将出现的直线的方向。

image.png

这张照片的其余部分主要是几个矩形和一个圆形。