How can I detect a click on a rotated image in Slick2D?

Question

I have an image that I rotate before drawing. The image rotates at the corners of the hexagon. In other words, the image basically “highlights” the individual edges of the hexagon. I need to determine if the mouse was clicked inside this rotated image. Detecting a mouse click inside a non-rotating image is pretty simple, but I have no idea how to detect clicks at rotating points. Is there a way to get the corner points of the image after rotation so that I can place an invisible polygon on top of the image and use 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

You can create a Shape to exactly match the Image shape, and then use its contains method to determine if the mouse was clicked inside.

To take into account the Image rotation, you can apply the corresponding Transform rotation to the Shape .

I created a shapeFromImage method that does this; he gets Image and its position and returns the corresponding 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; } 

In your example, you can use it as follows:

 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);