绘制锯齿,像素完美1px的花键(卡特莫尔-ROM,特别是)莫尔、卡特、花键、特别是

2023-09-07 13:41:26 作者:千杯风月醉

一个简单的背景:我正在一个基于Web的绘图应用程序,并需要绘制1px的厚的样条曲线通过其控制点

我挣扎的问题是,我需要的,如果我是用1px的铅笔工具绘制每个P1和P2之间的像素。所以,无抗锯齿并且一次一个像素。这需要在不使用任何线/曲线库code作为我刷系统手动完成取决于具有像素坐标的画笔笔尖应用到画布上。

从本质上讲,我需要将一个像素由类似布氏算法的卡特莫尔-ROM公式返回的坐标步进结合起来。我有麻烦,因为卡特莫尔-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)。如果更换轮地板或CEIL不解决这个问题,因为它只是改变其在何处发生。

解决方案

在这里,你必须的一文,描述了重新参数化样条曲线的方法的为了得到等距点沿曲线长度。我认为这可以解决你的问题,如果你可以将其适应的Catmull-ROM曲线(应该不会太困难,我猜)

A brief background: I'm working on a web-based drawing application and need to draw 1px thick splines that pass through their control points.

每天都在旋转图像,你真的转对了吗

The issue I'm struggling with is that I need to draw each of the pixels between p1 and p2 as if I were using a 1px pencil tool. So, no anti-aliasing and one pixel at a time. This needs to be done manually without the use of any line/curve library code as my brush system depends upon having a pixel coordinate to apply the brush tip to the canvas.

Essentially, I need to combine the one pixel stepping from something like the Bresenham algorithm with the coordinates returned by the Catmull-Rom equation. I'm having trouble because the Catmull-Rom points are not uniformly distributed (so I can't just say there should be 100 pixels in the curve and run the equation 100 times). I tried using an estimated starting value of the maximum of the X and Y deltas and filling in the gaps with Bresenham, but due to rounding I still end up with some "dirty" sections (ie. the line is clearly moving up and to the right but I still get two pixels with the same Y component, resulting in a "fat" section of the line).

I'm positive this has been solved because nearly every graphics program that draws splines has to support the clean pixel curves that I'm after. After quite a bit of math research, though, I'm a bit confused and still without a solution. Any advice?

EDIT: Here's an example of a curve that I might have to render:

Which might have an expected result looking like this (note that this is an estimate):

Using the Catmull-Rom spline equation, we need four points to create a segment. P0 and P3 are used as tangents for incoming and outgoing direction from the P1->P2 segment. With a Catmull-Rom spline, the blue section is all that gets interpolated as t moves from 0 to 1. P0 and P3 can be duplicated to ensure that the green portion gets rendered, so that is not an issue for me.

For simplicity's sake, I need to render the pixels on the curve between P1 and P2, given that I have tangents in the form of P0 and P3. I don't necessarily need to use Catmull-Rom splines, but they seem to be the right tool for this job being that control points must be passed through. The non-uniform distribution of interpolation points is what's throwing me for a loop.

EDIT2: Here's an example of what I mean when I say my resulting curve is dirty:

The red arrows point out a few locations where there should not be a pixel. This is occurring because the X and Y components of the coordinate that get calculated do not change at the same rate. So, when each of the components gets rounded (so I have an exact pixel location) it can be the case that either X or Y doesn't get bumped up because the calculated coordinate is, say, (42.4999, 50.98). Swapping the round for a floor or ceil doesn't solve the problem, as it just changes where it occurs.

解决方案

Here you have a paper describing method for the re-parametrization of splines in order to get equally spaced points along the curve length. I think this can solve your problem if you can adapt it to Catmull-Rom curves (shouldn't be too difficult, I guess)

 
精彩推荐