c# - 在 C# 平面中绘制粗细可变的羽化线

Question

我正在创建一个高度图绘制工具，它使用样条曲线绘制高度图，值从 0 到 1。样条曲线由几个点组成，每个点具有不同的厚度(大小/宽度)，并进行插值。该工具在高度图上绘制路径投影，厚度由用户指定，乘以每个点的大小和用户指定的羽毛。到目前为止，我已经设法实现了所有内容，并且我的实现是这样工作的:

• 取两个点(i 和 i+1)( http://i.imgur.com/PToj9ws.jpg )

• 找到 (points[i+1].position-points[i].position) ( http://i.imgur.com/9imeDNU.jpg ) 的垂线

• 使用羽毛填充由垂直线 (http://i.imgur.com/QFfcR89.jpg) 的起点和终点定义的矩形。

为了填充这些矩形，我使用 Bresenham 线算法的变体绘制了多条线:

public void drawLine(Point fromPoint, Point toPoint, float fromValue, float toValue, ref float[,] grid)
{
    int x0 = fromPoint.x, y0 = fromPoint.y, x1 = toPoint.x, y1 = toPoint.y;
    int dx = Mathf.Abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
    int dy = -Mathf.Abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
    int err = dx + dy, e2;
    int x = x0, y = y0;
    Vector2 target = new Vector2(x1 - x0, y1 - y0);
    while(true)
    {
        Vector2 current = new Vector2(x - x0, y - y0);
        float addValue = Mathf.Lerp(fromValue, toValue, current.magnitude / target.magnitude);

        plot(x, y, addValue, 1f, ref grid);
        if (sample) grid[x, y] = supersample(x, y, ref grid);

        if (x == x1 && y == y1) break;
        e2 = 2 * err;
        if (e2 > dy)
        {
            err += dy;
            x += sx;
        } else if (e2 < dx)
        {
            err += dx;
            y += sy;
        }
    }
}

到目前为止一切顺利!然而，当样条曲线上的一个点与其他点的大小不同时，问题就来了。由于此算法不绘制抗锯齿线，因此绘制的形状开始看起来参差不齐。发生这种情况是因为我为较大点的垂直线的每个像素画了一条线，并将它们的端点映射到较小点的垂直线。所以基本上线条开始围绕更窄的点相互重叠。我试图画一个图形来可视化问题:

所以我的最终结果是这样的:

你可以看到羽化部分非常参差不齐。

我尝试使用吴小林的线条算法来绘制线条，但会导致像素之间出现间隙，并且填充变得不一致。到目前为止，仅应用高斯模糊让事情看起来更好，但它并没有完全解决问题，而且它很重，所以我也放弃了这个选项。

我真的需要在不使用任何库的情况下实现它，因此非常欢迎任何关于如何解决这个问题的建议。谢谢!

Answer 1

听起来，如果有多条线绘制到一个特定点，您希望为每条线添加“less”。绘制到特定点的线越多，每条线对它的影响就越“小”。

类似...(未编译的示例)

int[,] gridDrawCount = new int[grid.GetLength(0),grid.GetLength(1)];

...

//inside the loop
gridDrawCount[x,y]++;
plot(x, y, addValue/gridDrawCount[x,y], 1f, ref grid);  //I added the divide by part

您可能想要，而不是如上所示在循环内进行除法，而是在循环后遍历网格，然后将每个值除以 gridDrawCount 值(注意 div 为零)- 应该给出略有不同，可能更一致的效果，但显然会更慢。