如何在 libGDX 中围绕填充的多边形绘制精确的边界？
How to draw precise borders around filled polygons in libGDX?
我正在尝试在另一个填充多边形上绘制一个较小的填充多边形（在我的例子中，它总是凸的而不是自相交的四边形），以获得围绕该填充多边形的边界的印象。为此，我找到了如何计算四边形的质心——它将是一个点，较小的填充多边形将围绕该点按比例缩小。我从这里复制了算法：https://math.stackexchange.com/a/2878092
这里是 class 的完整代码：
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 here: http://eguruchela.com/math/Calculator/polygon-centroid-point
但是 the resulting borders doesn't look okay。在计算顶点位置时，我什至认为 libGDX 中存在一些浮点运算问题，但我找不到任何问题，所以我不知道问题在哪里。旋转也有问题，因为现在我在四边形的质心处绘制原点，所以它无法正确渲染（在尝试绘制边框之前，originX 和 originY 为 0，这使得正确渲染旋转体正确, 现在它不对齐了。
你知道如何正确渲染这个边界并正确旋转多边形吗？或者也许解决这个问题的整个方法是错误的并且有更好的方法来做到这一点？
好的，我现在可以使用了。我使用了这个算法：https://math.stackexchange.com/a/2824263 (Method 2). Here's how it looks now. It's not 100% stable though. Some very flat quadrangles are buggy, it's rare if border isn't thick, but if it is it can look like this 当边框厚度设置得更高时更糟。但对于我的细边框来说，它已经足够好了。现在是 class 的代码：
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);
}
}
我正在尝试在另一个填充多边形上绘制一个较小的填充多边形（在我的例子中，它总是凸的而不是自相交的四边形），以获得围绕该填充多边形的边界的印象。为此，我找到了如何计算四边形的质心——它将是一个点，较小的填充多边形将围绕该点按比例缩小。我从这里复制了算法：https://math.stackexchange.com/a/2878092
这里是 class 的完整代码：
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 here: http://eguruchela.com/math/Calculator/polygon-centroid-point 但是 the resulting borders doesn't look okay。在计算顶点位置时，我什至认为 libGDX 中存在一些浮点运算问题，但我找不到任何问题，所以我不知道问题在哪里。旋转也有问题，因为现在我在四边形的质心处绘制原点，所以它无法正确渲染（在尝试绘制边框之前，originX 和 originY 为 0，这使得正确渲染旋转体正确, 现在它不对齐了。
你知道如何正确渲染这个边界并正确旋转多边形吗？或者也许解决这个问题的整个方法是错误的并且有更好的方法来做到这一点？
好的，我现在可以使用了。我使用了这个算法：https://math.stackexchange.com/a/2824263 (Method 2). Here's how it looks now. It's not 100% stable though. Some very flat quadrangles are buggy, it's rare if border isn't thick, but if it is it can look like this 当边框厚度设置得更高时更糟。但对于我的细边框来说，它已经足够好了。现在是 class 的代码：
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);
}
}