如何在libGDX中的填充多边形周围绘制精确的边框?

时间:2018-10-25 19:18:53

标签: java libgdx box2d polygon centroid

我试图在另一个填充的多边形上绘制一个较小的填充的多边形(在我的情况下,它们总是凸的而不是自相交的四边形),以给该填充的多边形周围一个边框。为此,我发现了如何计算四边形的质心-将围绕该点缩小较小的填充多边形。我已经从此处复制了算法:https://math.stackexchange.com/a/2878092

这是该类的完整代码:

public class BodyPartActor extends Actor {
    private static TextureRegion textureRegion = Globals.getTextureRegion();
    private static Color borderColor = Assets.getSkin().getColor("pink");
    private static Color bodyPartColor = Assets.getSkin().getColor("green");
    private static short[] triangles = new short[] {
            0, 1, 2,         // Two triangles using vertex indices.
            0, 2, 3          // Take care of the counter-clockwise direction.
    };
    private PolygonRegion polygonRegion;
    private BodyPart bodyPart;
    private Vector2 centroid;

    public BodyPartActor(BodyPart bodyPart) {
        this.bodyPart = bodyPart;
        polygonRegion = new PolygonRegion(textureRegion, this.bodyPart.getVertices(), triangles);
        centroid = getCentroidOfQuadrangle();
    }

    private Vector2 getCentroidOfQuadrangle() {
        float[] v = bodyPart.getVertices();
        Vector2 centroidA = getCentroidOfTriangle(new float[]{v[0], v[1], v[2], v[3], v[4], v[5]});
        Vector2 centroidB = getCentroidOfTriangle(new float[]{v[2], v[3], v[4], v[5], v[6], v[7]});
        Vector2 centroidC = getCentroidOfTriangle(new float[]{v[4], v[5], v[6], v[7], v[0], v[1]});
        Vector2 centroidD = getCentroidOfTriangle(new float[]{v[6], v[7], v[0], v[1], v[2], v[3]});
        return getPointOfLinesIntersection(centroidA, centroidC, centroidB, centroidD);
    }

    private Vector2 getCentroidOfTriangle(float[] vertices) {
        return new Vector2 (
                (vertices[0] + vertices[2] + vertices[4]) / 3,
                (vertices[1] + vertices[3] + vertices[5]) / 3
        );
    }

    private Vector2 getPointOfLinesIntersection(Vector2 startLineA, Vector2 endLineA, Vector2 startLineB,
                                                Vector2 endLineB) {
        float detOfLineA = det2x2(startLineA.x, startLineA.y, endLineA.x, endLineA.y);
        float detOfLineB = det2x2(startLineB.x, startLineB.y, endLineB.x, endLineB.y);

        float xDeltaOfLineA = startLineA.x - endLineA.x;
        float xDeltaOfLineB = startLineB.x - endLineB.x;
        float yDeltaOfLineA = startLineA.y - endLineA.y;
        float yDeltaOfLineB = startLineB.y - endLineB.y;

        float xNom = det2x2(detOfLineA, xDeltaOfLineA, detOfLineB, xDeltaOfLineB);
        float yNom = det2x2(detOfLineA, yDeltaOfLineA, detOfLineB, yDeltaOfLineB);
        float deNom = det2x2(xDeltaOfLineA, yDeltaOfLineA, xDeltaOfLineB, yDeltaOfLineB);

        return new Vector2(xNom / deNom, yNom / deNom);
    }

    /**
     * Calculate determinant of a 2x2 matrix:
     * |a b|
     * |c d|
     */
    private float det2x2(float a, float b, float c, float d) {
        return (a * d) - (b * c);
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        float x = bodyPart.getBody().getPosition().x;
        float y = bodyPart.getBody().getPosition().y;
        float width = polygonRegion.getRegion().getRegionWidth();
        float height = polygonRegion.getRegion().getRegionHeight();
        float originX = centroid.x;
        float originY = centroid.y;
        float rotation = calculateRotation(originX, originY);

        PolygonSpriteBatch polygonSpriteBatch = (PolygonSpriteBatch) batch;
        polygonSpriteBatch.setColor(borderColor.r, borderColor.g, borderColor.b, borderColor.a * parentAlpha);
        polygonSpriteBatch.draw(polygonRegion, x, y, originX, originY, width, height, 1f, 1f, rotation);
        polygonSpriteBatch.setColor(bodyPartColor.r, bodyPartColor.g, bodyPartColor.b, bodyPartColor.a * parentAlpha);
        polygonSpriteBatch.draw(polygonRegion, x, y, originX, originY, width, height, 0.9f, 0.9f, rotation);
    }

    private float calculateRotation(float originX, float originY) {
    // How to calculate when originX and originY are the center of quadrangle???
        return bodyPart.getBody().getAngle() * MathUtils.radiansToDegrees; // Works only if originX and originY are 0.
    }
}

我似乎checked it herehttp://eguruchela.com/math/Calculator/polygon-centroid-point正确地计算了质心 但the resulting borders doesn't look okay。我什至以为libGDX在计算顶点位置时存在一些浮点算术问题,但我找不到任何问题,所以我不知道问题出在哪里。旋转还有一个问题,因为现在我将原点绘制在四边形的质心处,所以它无法正确渲染(在尝试绘制边框之前,originX和originY为0,这使得正确渲染旋转的物体正确) ,现在与应有的方式不符。

您知道如何正确渲染此边框以及如何正确旋转多边形吗?也许解决此问题的整个方法是错误的,并且有更好的方法可以做到这一点?

1 个答案:

答案 0 :(得分:0)

好的,我现在可以正常工作了。我使用了以下算法:https://math.stackexchange.com/a/2824263(方法2)。 Here's how it looks now。但是它不是100%稳定的。一些非常扁平的四边形是越野车,如果边框不粗则很少见,但如果边框it can look like this较粗,则将边框粗度设置得更高时更糟。但是对于我的薄边框来说,这已经足够了。这是该类的代码:

public class BodyPartActor extends Actor {
    private static TextureRegion textureRegion = Globals.getTextureRegion();
    private static Color borderColor = Assets.getSkin().getColor("bodyPartBorder");
    private static Color fillColor = Assets.getSkin().getColor("bodyPartFill");
    private static short[] triangles = new short[] {
            0, 1, 2,         // Two triangles using vertex indices.
            0, 2, 3          // Take care of the counter-clockwise direction.
    };
    private static float borderThickness = 0.1f;
    private PolygonRegion polygonRegionBorder;
    private PolygonRegion polygonRegionFill;
    private BodyPart bodyPart;

    public BodyPartActor(BodyPart bodyPart) {
        this.bodyPart = bodyPart;
        float[] vertices = this.bodyPart.getVertices();
        polygonRegionBorder = new PolygonRegion(textureRegion, vertices, triangles);
        polygonRegionFill = new PolygonRegion(textureRegion, calculateInnerVertices(vertices), triangles);
    }

    /**
     * @param v vertices of the outer quadrangle
     */
    private float[] calculateInnerVertices(float[] v) {
        Vector2 vA = calculateInnerVertex(v[6], v[7], v[0], v[1], v[2], v[3]);
        Vector2 vB = calculateInnerVertex(v[0], v[1], v[2], v[3], v[4], v[5]);
        Vector2 vC = calculateInnerVertex(v[2], v[3], v[4], v[5], v[6], v[7]);
        Vector2 vD = calculateInnerVertex(v[4], v[5], v[6], v[7], v[0], v[1]);
        return new float[]{vA.x, vA.y, vB.x, vB.y, vC.x, vC.y, vD.x, vD.y};
    }

    /**
     * Positive borderThickness value will produce vertex that is offseted to the inner side of the provided quadrangle.
     * Negative borderThickness value will produce vertex that is on the outer side of the quadrangle.
     */
    private Vector2 calculateInnerVertex(float prevX, float prevY, float curX, float curY, float nextX, float nextY) {
        Vector2 v = new Vector2(nextX - curX, nextY - curY);
        Vector2 w = new Vector2(prevX - curX, prevY - curY);
        Vector2 u = v.cpy().scl(w.len()).add(w.cpy().scl(v.len()));
        float absDetVW = Math.abs((v.x * w.y) - (v.y * w.x));
        return new Vector2(curX, curY).add(u.scl(borderThickness / absDetVW));
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        float x = bodyPart.getBody().getPosition().x;
        float y = bodyPart.getBody().getPosition().y;
        float rotation = bodyPart.getBody().getAngle() * MathUtils.radiansToDegrees;

        PolygonSpriteBatch polygonSpriteBatch = (PolygonSpriteBatch) batch;
        polygonSpriteBatch.setColor(borderColor.r, borderColor.g, borderColor.b, borderColor.a * parentAlpha);
        polygonSpriteBatch.draw(polygonRegionBorder, x, y, 0f, 0f, 1f, 1f, 1f, 1f, rotation);
        polygonSpriteBatch.setColor(fillColor.r, fillColor.g, fillColor.b, fillColor.a * parentAlpha);
        polygonSpriteBatch.draw(polygonRegionFill, x, y, 0f, 0f, 1f, 1f, 1f, 1f, rotation);
    }
}