绘制别名,像素完美的1px样条(Catmull-Rom,具体)

Xen*_*hyl 8 algorithm graphics 2d pixel splines

简要背景:我正在开发一个基于Web的绘图应用程序,需要绘制1px厚的样条曲线,这些样条曲线通过它们的控制点.

我正在努力解决的问题是我需要在p1和p2之间绘制每个像素,就像我使用1px铅笔工具一样.因此,一次没有抗锯齿和一个像素.这需要在不使用任何线/曲线库代码的情况下手动完成,因为我的画笔系统依赖于具有像素坐标以将画笔笔尖应用于画布.

基本上,我需要将像Bresenham算法这样的一个像素步进与Catmull-Rom方程返回的坐标结合起来.我遇到了麻烦,因为Catmull-Rom点分布不均匀(所以我不能说曲线中应该有100个像素并运行方程100次).我尝试使用最大的X和Y的增量的的估计初始值和与布氏间隙充填,但由于四舍五入我仍然结束了一些"脏"的部分(即该线清楚地向上移动,并与对,但我仍然得到两个具有相同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).将圆形换成地板或天花板并不能解决问题,因为它只会改变发生的位置.

Dr.*_*ius 2

这里有一篇论文描述了样条线重新参数化的方法,以便沿着曲线长度获得等距的点。我认为如果您可以将其适应 Catmull-Rom 曲线,这可以解决您的问题(我猜应该不会太难)