如何檢測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);