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

前端之家收集整理的这篇文章主要介绍了algorithm – 绘制别名,像素完美的1px样条(Catmull-Rom,具体)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
简要背景:我正在开发一个基于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).将圆形换成地板或天花板并不能解决问题,因为它只会改变发生的位置.

解决方法

这里有 a paper describing method for the re-parametrization of splines,以便沿曲线长度获得等间距的点.我认为这可以解决你的问题,如果你可以适应Catmull-Rom曲线(我猜不应该太难)

猜你在找的CSS相关文章