algorithm - 绘制别名、像素完美的 1px 样条曲线(特别是 Catmull-Rom)

Question

简要背景:我正在开发一个基于网络的绘图应用程序，需要绘制通过其控制点的 1px 粗样条线。

我遇到的问题是我需要像使用 1px 铅笔工具一样绘制 p1 和 p2 之间的每个像素。因此，一次没有抗锯齿和一个像素。这需要在不使用任何直线/曲线库代码的情况下手动完成，因为我的画笔系统依赖于像素坐标来将画笔 Nib 应用于 Canvas 。

本质上，我需要将 Bresenham 算法之类的一个像素步进与 Catmull-Rom 方程返回的坐标结合起来。我遇到了麻烦，因为 Catmull-Rom 点分布不均匀(所以我不能只说曲线中应该有 100 个像素并运行方程 100 次)。我尝试使用 X 和 Y 增量的最大值的估计起始值并用 Bresenham 填补空白，但由于四舍五入，我仍然得到一些“脏”部分(即线明显向上移动并移动到是的，但我仍然得到两个具有相同 Y 分量的像素，导致线条的“粗”部分)。

我肯定这已经解决了，因为几乎每个绘制样条曲线的图形程序都必须支持我所追求的干净像素曲线。但是，经过相当多的数学研究后，我有点困惑，仍然没有解决方案。有什么建议吗？

编辑:这是我可能需要渲染的曲线示例:

预期结果可能如下所示(请注意，这是一个估计值):

使用 Catmull-Rom 样条方程，我们需要四个点来创建线段。 P0 和 P3 用作 P1->P2 段的传入和传出方向的切线。使用 Catmull-Rom 样条，蓝色部分是 t 从 0 移动到 1 时插值的所有部分。可以复制 P0 和 P3 以确保渲染绿色部分，所以这对我来说不是问题。

为简单起见，假设我有 P0 和 P3 形式的切线，我需要渲染 P1 和 P2 之间曲线上的像素。我不一定需要使用 Catmull-Rom 样条曲线，但它们似乎是这项工作的正确工具，因为必须通过控制点。插值点的不均匀分布让我陷入了循环。

EDIT2:当我说我的结果曲线很脏时，这是我的意思的一个例子:

红色箭头指出了一些不应有像素的位置。发生这种情况是因为计算得到的坐标的 X 和 Y 分量不会以相同的速率变化。因此，当每个组件都被舍入时(因此我有一个精确的像素位置)，可能是 X 或 Y 没有被提升，因为计算的坐标是，比方说，(42.4999, 50.98)。将圆形换成地板或天花板并不能解决问题，因为它只是改变了发生的位置。

Answer 1

这里有 a paper describing method for the re-parametrization of splines为了沿着曲线长度获得等间距的点。我认为这可以解决您的问题，如果您可以将其适应 Catmull-Rom 曲线(我想应该不会太难)