如何在 Slick2D 中检测对旋转图像的点击？

Question

我有一个图像，我在绘制之前会旋转。图像按六边形的角度旋转。换句话说，图像基本上“突出”了六边形的各个边缘。我需要检测是否在此旋转图像内单击了鼠标。在未旋转的图像内检测鼠标点击非常简单，但我不知道如何检测旋转点内的点击。有没有办法在旋转后获取图像角落的点，以便我可以在图像顶部放置一个不可见的多边形并使用 Polygon.contains()？

                    Image highlightEdge = new Image("assets/img/highlightEdge.png");
                    if(angle == 90){
                        highlightEdge.setCenterOfRotation(highlightEdge.getWidth(), 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(testPoint.x - 56, testPoint.y);
                    } else if(angle == 210) {
                        highlightEdge.setCenterOfRotation(0, 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(lastSettlement.x - 72, lastSettlement.y - 32);
                    } else if( angle == 330){
                        highlightEdge.setCenterOfRotation(0, 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(lastSettlement.x - 8, lastSettlement.y - 32);
                    } else if(angle == 30){
                        highlightEdge.setCenterOfRotation(0, 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(lastSettlement.x-8, lastSettlement.y);
                    } else if(angle == 150){
                        highlightEdge.setCenterOfRotation(0, 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(lastSettlement.x-72, lastSettlement.y);
                    } else {
                        highlightEdge.setCenterOfRotation(0, 0);
                        highlightEdge.rotate(new Float(angle));
                        highlightEdge.draw(lastSettlement.x-40, lastSettlement.y - 48);
                    }

Answer 1

您可以创建一个Shape 来完全匹配Image 的形状，然后使用它的方法contains 来检测鼠标是否在里面点击。

要考虑Image 的旋转，您可以将相应的旋转Transform 应用到Shape。

我创建了执行此操作的方法shapeFromImage；它接收Image 及其位置并返回相应的Shape：

/**
 * Returns the Shape of an Image considering its rotation
 * @param image
 * @param x the x position of the Image
 * @param y the y position of the Image
 */
public static Shape shapeFromImage(Image image, float x, float y) {

    // create a rectangle with same position and size of the image
    Shape imageShape = new Rectangle(x, y, image.getWidth(), image.getHeight());

    // get the rotation angle of the image
    float angle = image.getRotation();

    // if the image is rotated, we also need to rotate our shape 
    if (angle != 0.f) {

        // convert the rotation angle in radians to use in Transform 
        float angleInRadians = (float) Math.toRadians(angle);

        // get the point of rotation to use in Transform.
        // image.getCenterOfRotation returns a point relative to the image.
        // for Transform we need an absolute point, so we add the image position to it
        float rotationX = image.getCenterOfRotationX() + x;
        float rotationY = image.getCenterOfRotationY() + y;

        // create the rotation Transform to match the image rotation
        Transform rotationTransform = Transform.createRotateTransform(angleInRadians, rotationX, rotationY);

        // apply the rotation Transform to our shape
        imageShape = imageShape.transform(rotationTransform);

    }

    return imageShape;
}

在您的示例中，您可以像这样使用它：

float positionX;
float positionY;

if (angle == 90) {
    highlightEdge.setCenterOfRotation(highlightEdge.getWidth(), 0);
    highlightEdge.rotate(new Float(angle));

    positionX = testPoint.x - 56;
    positionY = testPoint.y;

    highlightEdge.draw(positionX, positionY);
} 

...

// you can now use this Shape to use its method "contains"
imageShape = shapeFromImage(highlightEdge, positionX, positionY);