这篇文章介绍了路径绘制（pen）工具的新模型，特别着重于字体设计。
尽管此工具的工作方式与熟悉的钢笔工具（基于贝塞尔曲线的操纵）非常相似，但实际上是基于新的两个控制点曲线系列，我们将其称为超级贝塞尔曲线。
这项工作仍处于初期阶段，下面的演示相当准系统。我的目标是使该工具的简单版本交到设计师和设计工具制造商的手中，以便更多的人可以开始试用和评估它。
此工具的基础是用于将曲线拟合到一组点的新数学模型；这项工作是在今年年初由我的合作者Raph Levien完成的。在过去的一年左右的时间里，拉夫（Raph）一直在与我谈论样条曲线，G2连续性和欧拉螺旋线的优雅之类的话题，而我大部分时间一直在礼貌地微笑着点头。然而，在过去的几周中，我开始尝试围绕他的新模型实现一个简单的绘图应用程序，令人兴奋的是：这个新工具就像我使用的第一个工具一样，可以替代传统的基于贝塞尔曲线的绘图工具。
如果您曾经使用过计算机绘图应用程序，则可能在某个时候使用了钢笔工具：一种允许您放置少量点的工具，然后将这些点与一系列曲线相连，精确的曲率是点位置的函数。
这样的工具（需要一定数量的点并根据这些点计算曲线）称为样条线。如果您对该主题感兴趣（尤其是在交互式设计工具的上下文中），那么Raph的论文是非常容易获得的概述；除了要说Raph最近一直在重新研究这个主题之外，这里我将不做过多介绍，其结果是Hyperbezier样条曲线。像传统的（贝塞尔）贝塞尔曲线路径一样，超贝塞尔曲线路径由线段组成，每个线段由两个曲线上点和两个曲线外（或控制点）定义；曲线穿过两个曲线上的点，曲率本身由两个曲线外点的位置确定。
如果您通常对贝塞尔（Béziers）感到好奇，那么贝塞尔曲线上的入门指南就是一个很好的资源。就我们的目的而言，足以注意到基于贝塞尔（Bézier）控制点（大多数钢笔工具）的直接操纵的样条曲线提供了高度的控制，但是很难很好地使用。特别是，在路径的相邻段之间保持一致的曲率可能会很棘手，这可能导致“块状”外观；下面的示例是人为设计的，但是在实践中，与Béziers保持一致的平滑感觉曲线是具有挑战性的。
hyperbezier的核心思想是使用自动点。这些控制点由工具自动调整，以保持相邻曲线段之间的平滑曲线。
让我们看一个例子。使用下面的路径，您可以拖动点，然后双击点以切换其类型。
两个绿色正方形是拐角点；在这些点处连接的曲线段可以急剧改变方向。两个蓝色圆圈是平滑点；在点的一侧更改曲线可能会导致另一侧的自动点（进而是曲线）发生变化。
自动点用虚线表示，并以“ x”结尾。手动控制点以实线表示，并以“ o”结尾。
为了更好地了解样条的行为，请尝试以下操作（这需要鼠标）：
双击底点使其平滑。当该点平滑时，将调整其旁边的自动点，以使两个曲线段平滑连接。
重置，或双击底点以将其变回一个角。现在，双击左上角的平滑点。将左上角设为一个角将用一条直线替换它们之间的曲线。两个相邻的角之间仅具有自动点，它们将始终形成一条直线，因为一条线最大程度地平滑。您应该注意到这行上有两个小的“ x”。将这些自动点之一拖到某处以手动定位。您会注意到，拖动时会重新定位其余的自动点。
拖动另一个自动点。 手动放置两个控制点，并在每个末端都带有角，即可完全控制此线段。 如果您想尝试使用此工具进行绘图，可以在此处（下面嵌入）有一个简单的Web应用程序。 以下是我在进行此工作的过程中草绘的一些字母形式的示例。 这些可能会冒犯房间中的实际字体设计师，但我希望他们会成为有用的插图。 玩具非常粗糙：您有一个选择工具和一个钢笔工具，但是没有标尺或测量工具，没有变换，也没有选择多个点的能力。 该笔的工作方式与熟悉的贝塞尔笔类似： 当前图形存储为URL的一部分； 将此内容复制到“保存” 单击并拖动以添加以平滑点结尾的曲线段，并带有一个手动控制点 单击线段以在此处插入点； alt使它变得平滑
拖动控件自动点以将其移动，如有必要，将其转换为手动点
箭头键将当前选择微移1像素；添加shift使其变为10px，而ctrl / cmd使其变为100px。
Shift +以上任何一项可移动当前轮廓中的所有点（很抱歉）
花键的代码（包括演示）是开源的，可以在github上找到。
该演示的目的是双重的：首先测试该曲线的使用感觉，并开始使用钢笔工具的用户体验，其次与更广泛的设计师和设计工具创建者社区共享这项研究。尽管这项工作相当艰巨，但我个人认为该花键显示出巨大的希望。有趣的是，作为设计工具的休闲用户，我发现使用超级贝塞尔曲线创建漂亮的曲线比使用传统的贝塞尔曲线笔工具要容易得多。
也许最大的问题将是找出最佳的交互模型：用户为了控制点的状态而发出哪些鼠标单击，按键和修饰符。对于其他新花键来说，这是一个挑战。我们与Béziers所使用的交互模型是熟悉且长期存在的，人们（尤其是图形设计师）对此非常满意。此处针对超级贝塞尔曲线使用的交互模型经过有意设计，使其与这些现有工具相似，但其他交互模型可能值得探讨。
我希望在接下来的几周内将样条线集成到字体编辑器Runebender中，这将提供更丰富的编辑体验，并使我们更好地探索该样条线如何适合实际使用。此外，Raph打算对花键本身及其相关的数学进行更详细的记录，该数学均源自早期的Spiro花键和受拉的经典弹性模型。
如果您对样条曲线感到好奇，请在github存储库中找到更多详细信息； 如果您有任何疑问，可以在那打开一个问题，在我们的zulip聊天服务器中询问他们，或者在Twitter上进行宣传。