如何在HTML5 SVG上绘制二次Bézier曲线

SVG二次贝塞尔曲线：绘制平滑边缘的利器

本文将探讨如何在HTML5 SVG中使用二次贝塞尔曲线绘制平滑边缘。二次贝塞尔曲线通过SVG路径d属性中的Q指令定义，具有起点和终点，并通过单个控制点来确定曲线的弯曲程度。

关键要点:

• SVG路径d属性中的Q指令用于定义二次贝塞尔曲线，它包含起点、控制点和终点三个坐标。
• 使用小写字母q可以指定相对坐标，而T和t指令则可以用于连接多个曲线，系统会根据上一个曲线自动推断控制点，以确保曲线平滑过渡。
• 虽然编码和可视化二次贝塞尔曲线可能具有挑战性，但可以使用工具生成<path></path>代码。
• 二次贝塞尔曲线可用于创建复杂的形状，并可以通过<animate></animate>元素、CSS动画或JavaScript进行动画处理。

先前文章“如何在SVG中创建复杂的路径”探讨了<path></path>元素，并展示了如何绘制一系列线段和弧线来创建任何形状（常用于在无需下载完整字体的情况下复制字体）。d属性提供了一些额外的技巧来绘制平滑曲线。本文将讨论二次贝塞尔曲线，您还可以参考“如何在SVG图像上绘制三次贝塞尔曲线”以了解更复杂的选择。

什么是二次贝塞尔曲线？

二次贝塞尔曲线具有起点（P0）和终点（P2）。单个控制点（P1）决定线的曲率。维基百科的贝塞尔曲线页面提供了一个很好的生成图示：

图片源自维基百科

数学爱好者也可以在Wolfram MathWorld上查看令人头疼的方程式。

二次曲线非常适合绘制平滑边缘。从下图可以看出，很容易指定一个控制点，而通常情况下会出现直角边：

复杂的路径

二次贝塞尔曲线使用SVG路径d属性中的Q指令定义：

<path d="M100,250 Q250,100 400,250" />

初始M指令将笔移动到第一点（100,250）。Q之后跟随两个坐标：单个控制点（250,100）和最终绘制到的点（400,250）。

您也可以使用小写字母q来表示相对坐标而不是绝对坐标。以下曲线将是相同的，并且可能更容易编码：

<path d="M100,250 Q250,100 400,250" />

最后，还有简写T和t指令（通常，小写字母表示相对坐标而不是绝对坐标）。这些指令接受进一步的结束坐标以将多个曲线连接在一起。控制点是从上次使用的点推断出来的，以保证完美的平滑连续曲线。例如，考虑以下路径：

<path d="M100,250 q150,-150 300,0" />

它绘制一条从100,250到400,250的曲线，控制点位于250,100。然后绘制另一条曲线，结束于700,250，控制点被推断为550,400。

推断出的控制点在数学上是正确的，但可能并不总是您需要的！

二次贝塞尔曲线可能有点难以编码和可视化，因此可以使用快速生成工具为您生成<path></path>代码：

CodePen链接

拖动曲线两端的控制点。单击曲线本身以切换填充效果，该效果会添加结束Z指令。

请注意，此工具必须将DOM页面坐标转换为SVG坐标才能确保其在所有屏幕尺寸下都能正常工作。这可能比您预期的要复杂一些，因此请参考“如何从DOM坐标转换为SVG坐标并返回”以了解完整细节。

如果您准备好处理更复杂的问题，请尝试在SVG图像上创建三次贝塞尔曲线。

(此处应添加原文中提到的FAQ部分，内容已在原文中给出，此处不再重复)

以上是如何在HTML5 SVG上绘制二次Bézier曲线的详细内容。更多信息请关注PHP中文网其他相关文章！