使用 libGDX 以编程方式绘制漂亮的线条答案

【问题标题】：Draw beautiful line programmatically using libGDX使用 libGDX 以编程方式绘制漂亮的线条
【发布时间】：2016-07-21 13:06:56
【问题描述】：

在我的 libGDX 项目中，我必须画出这样的线条：

它可能有不同数量的顶点。目前我只是将它作为具有透明背景的纹理添加到舞台。如果我有很多这样的线条，那么在地图集中会占用很多空间。所以我想使用 libGDX 以编程方式绘制这些多边形链。我没有太多时间也愿意编写自己的库来实现这一点，所以我对一些现有的解决方案很感兴趣。两个问题：

我发现可以使用 ShapeRenderer.rectLine() 绘制一条线。现在如何添加一些阴影、发光、圆形末端、渐变等以使其看起来更好？还是我必须自己实现所有这些？
我想答案是否定的，但仍然 - 有没有一种巧妙的方法可以沿一条线相乘一些小纹理？谢谢。

【问题讨论】：

对于 OpenGL，您可以指定超出 0-1 范围的纹理坐标。超出的情况由纹理参数环绕模式控制，例如重复或镜像。我认为这回答了问题 2。可以通过在渲染 rectLine 后添加小圆圈来实现圆形末端。如果您可以添加您希望“发光”、“阴影”和“渐变”如何工作的图像，我也会尝试为这些解决方案提供建议。

标签： java opengl graphics libgdx

【解决方案1】：

对于这种情况，我认为this 可能是解决此问题的最佳方法，但请记住，将 OpenGL 与 Stage 结合使用并不是解决此问题的最简单方法...

另一方面，一种更简单但可能不是那么“漂亮”也不是更快的解决方法可能是使用 TextureRegionDrawable，并针对线条路径中的每个点进行缩放、旋转和移动。

我写了一个小类，至少作为参考，它需要一些润色，特别是边角。

public class LineDrawer extends Actor {
    private Array<Vector2> path;
    private float thickness;
    private Image image;

    public LineDrawer(Array<Vector2> path, float thickness, TextureRegionDrawable drawable) {
        this.path = path;
        this.thickness = thickness;
        this.image = new Image(drawable);
        this.image.setOrigin(Align.left);
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        float dst, angle;
        Vector2 pointA, pointB;
        for (int i = 0; i < path.size - 1; i++) {
            pointA = path.get(i);
            pointB = path.get(i + 1);
            dst = pointA.dst(pointB);
            angle = MathUtils.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180f / MathUtils.PI;

            image.setSize(dst, thickness);
            image.setPosition(pointA.x, pointA.y, Align.left);
            image.setRotation(angle);

            image.draw(batch, parentAlpha);
        }
    }
}

【讨论】：