将网格和图形拟合在一起

Question

假设您正在尝试使用2D三角形网格渲染用户的徒手画。从一个普通的三角形常规网格开始，并为它们的边缘着色，以尽可能地匹配图形。为了改善结果，您可以稍微移动网格的顶点，但是将它们保持在常规网格中的某个距离内，这样网格就不会变得一团糟。假设边缘长度的1/4是一个相当长的距离，使顶点有移动空间，同时保持它们彼此的个人空间。

这是一个手工制作的表示我们正在尝试做的事情。由于绘图是从用户手绘的，它是从鼠标移动中获取的一系列线段。

常规网格稍微扭曲，以便用户的绘图更好地由网格边缘表示。不幸的是，最终结果看起来非常糟糕，但也许我们可能会以某种方式扭曲绘图以更好地适应网格，并且两种扭曲的组合将创建比原始绘图更容易识别的东西。

重要的是要保留角度，所以如果用户绘制一个90度角，它最终看起来接近90度角，如果用户绘制一条直线，它看起来并不像曲折。除此之外，我们没有理由不以其他方式更改绘图，例如翻译，缩放等等，因为我们不需要精确保留距离。

一个棘手的测试案例是一条完美的垂直线。上图中的三角形网格可以轻松处理水平线条，但是一种天真的方法会将垂直线条变成锯齿状的混乱。最好的技术似乎是水平平移直线，直到它穿过每个水平边缘，沿着边缘的1/4到3/4之间交替。这样我们可以将顶点向左或向右轻推1/4并获得完美的垂直线。这对一个人来说是显而易见的，但如何制作算法才能看到这一点？它涉及将线远离顶点移动，这与我们通常想要的相反。

这样做有什么诀窍吗？有谁知道一个简单的算法，可以提供出色的结果？