简要背景:我正在开发一个基于 Web 的绘图应用程序,需要绘制 1px 厚的样条线,这些样条线穿过它们的控制点。
我正在努力解决的问题是我需要在 p1 和 p2 之间绘制每个像素,就好像我使用的是 1px 铅笔工具一样。因此,没有抗锯齿和一次一个像素。这需要在不使用任何线条/曲线库代码的情况下手动完成,因为我的画笔系统依赖于像素坐标来将画笔笔尖应用于画布。
从本质上讲,我需要将像 Bresenham 算法这样的一个像素步进与 Catmull-Rom 方程返回的坐标相结合。我遇到了麻烦,因为 Catmull-Rom 点不是均匀分布的(所以我不能只说曲线中应该有 100 个像素并运行方程 100 次)。我尝试使用 X 和 Y 增量的最大值的估计起始值并用 Bresenham 填补空白,但由于四舍五入,我仍然会得到一些“脏”部分(即,这条线明显向上移动到对,但我仍然得到两个具有相同 Y 分量的像素,导致线条的“胖”部分)。
我很肯定这已经解决了,因为几乎每个绘制样条的图形程序都必须支持我所追求的干净像素曲线。然而,经过相当多的数学研究,我有点困惑,仍然没有解决方案。有什么建议吗?
编辑:这是我可能必须渲染的曲线示例:
这可能会产生如下所示的预期结果(请注意,这是一个估计值):
使用 Catmull-Rom 样条方程,我们需要四个点来创建一个线段。P0 和 P3 用作从 P1->P2 段的传入和传出方向的切线。使用 Catmull-Rom 样条,当 t 从 0 移动到 1 时,所有的蓝色部分都会被插值。可以复制 P0 和 P3 以确保渲染绿色部分,所以这对我来说不是问题。
为简单起见,我需要渲染 P1 和 P2 之间曲线上的像素,因为我有 P0 和 P3 形式的切线。我不一定需要使用 Catmull-Rom 样条,但它们似乎是这项工作的正确工具,因为必须通过控制点。插值点的不均匀分布让我陷入了循环。
EDIT2:这是一个例子,当我说我的结果曲线很脏时,我的意思是:
红色箭头指出了一些不应该有像素的位置。发生这种情况是因为计算得到的坐标的 X 和 Y 分量不会以相同的速率变化。因此,当每个组件都被四舍五入(所以我有一个精确的像素位置)时,可能是 X 或 Y 没有被向上颠簸,因为计算的坐标是(42.4999, 50.98)。将回合换成地板或天花板并不能解决问题,因为它只是改变了它发生的位置。