Как получить координаты щелчка по размеру ImageView в JavaFX Gridpane

Question

В настоящее время существует разрыв между тем, где я нажимаю, и координатами, которые печатаются на терминале. Кажется, он основывает координаты на центре GridPane, но не на самом изображении изображения.

Раньше я не изменял бы размер изображений в этом приложении, а скорее в автоматическом процессе фотошопа, и координаты щелчка/координат были бы синхронизированы.

Вот где я сделать ArrayList из изменения размеров изображений, которые будут отображаться в GridPane

//Makes imageView arraylist from all images in a given directory 
    private ArrayList<ImageView> makeImageViewArr(File imagesDir) { 

     //transer file names from directory folder to string array 
     File[] strImageList = imagesDir.listFiles(); 
     myMouseHandler mouseHandler = new myMouseHandler(); 

     //instantiate imageview arraylist 
     arrImageList = new ArrayList<ImageView>(); 

     //get files from folder & start at 1 to ignore ds.Store 
     for(int count = 1; count < strImageList.length; count++) { 
     ImageView imgView = 
     new ImageView(strImageList[count].toURI().toString()); 

     imgView.setFitHeight(360); 
     imgView.setFitWidth(640); 
     imgView.setPreserveRatio(true); 
     imgView.setSmooth(true); 
     imgView.setOnMouseClicked(mouseHandler); 
     arrImageList.add(imgView); 
     } 

     return arrImageList; 
    }//END METHOD 

Вот класс, где я обрабатывать фактический нажмите на ImageView

//inner class for mouse input 
    public class myMouseHandler implements EventHandler<MouseEvent> 
    { 
     /* Method which handles & executes mouse clicks 
     * 
     * @param e KeyEvent the code from the mouse click 
     * 
     * returns none 
     */ 
     @Override 
     public void handle(MouseEvent e) 
     { 
      //reset image to erase previous box 
      pane.setCenter(arrImageList.get(index)); 

      //get image that was clicked on and pixel reader from image 
      Image clickedImg = arrImageList.get(index).getImage(); 
      PixelReader pxlRdr = clickedImg.getPixelReader(); 

      //get image height/width for copy 
      int clickedImgW = (int) clickedImg.getWidth(); 
      int clickedImgH = (int) clickedImg.getHeight(); 

      //get x and y coordinates from click 
      int xCord = (int) e.getX(); 
      int yCord = (int) e.getY(); 

      nudgeX = xCord; 
      nudgeY = yCord; 

      //create writeable image and pixelwriter to draw click region 
      WritableImage outlineImg = new WritableImage(pxlRdr, 
        clickedImgW, clickedImgH); 
      PixelWriter pxlWrtr; 
      pxlWrtr = outlineImg.getPixelWriter(); 

      //draws region 
      drawRegion(pxlWrtr, xCord, yCord); 

      //display image with click boundary and link mouseHandler 
      //to refresh on next click 
      ImageView tempImg = new ImageView(outlineImg); 
      tempImg.setFitHeight(360); 
      tempImg.setFitWidth(640); 
      tempImg.setPreserveRatio(true); 
      tempImg.setSmooth(true); 
      myMouseHandler mouseHandler = new myMouseHandler(); 
      tempImg.setOnMouseClicked(mouseHandler); 
      pane.setCenter(tempImg); 

      //print relevant info about click region   
      System.out.println("xCord: " + xCord); 
      System.out.println("yCord: " + yCord + "\n");    
     }//END METHOD 
    }//END INNER CLASS 

Это просто рисует область, чтобы показать, где произошел щелчок.

//Draws region boundary after user clicks on image 
    private void drawRegion(PixelWriter pxlWrtr, int xCord, int yCord) { 

     Image clickedImg = arrImageList.get(index).getImage(); 
     PixelReader pxlRdr = clickedImg.getPixelReader(); 

     //get image height/width for copy 
     int clickedImgW = (int) clickedImg.getWidth(); 
     int clickedImgH = (int) clickedImg.getHeight(); 

     //draw right vert boundary 
     for(int yTrack = (yCord + 1); yTrack > (yCord - regionSize); yTrack--) { 
     if((yTrack > 0 && yCord < clickedImgH - 1) 
       && (xCord < clickedImgW - 1)) { 
      pxlWrtr.setColor(xCord + 1, yTrack, Color.RED); 
     } 
     } 

     //draw left vert boundary 
     for(int yTrack = (yCord + 1); yTrack > (yCord - regionSize); yTrack--) { 
     if((yTrack > 0 && yCord < clickedImgH - 1) 
       && (xCord - regionSize) >= 0) { 
      pxlWrtr.setColor(xCord - regionSize, yTrack, Color.RED); 
     } 
     } 

     //draw bottom boundary 
     for(int xTrack = (xCord + 1); xTrack >= (xCord - regionSize); xTrack--) { 
     if(xTrack > 0 && yCord < clickedImgH - 1) { 
      pxlWrtr.setColor(xTrack, yCord + 1, Color.RED); 
     } 
     } 

     //draw top boundary 
     for(int xTrack = (xCord + 1); xTrack >= (xCord - regionSize); xTrack--) { 
     if(xTrack >= 0 && (yCord - regionSize) >= 0) { 
      pxlWrtr.setColor(xTrack, yCord - regionSize, Color.RED); 
     } 
     } 
    }//END METHOD 

Answer 1

По the documentation for preserveRatio:

... размеры этого узла, как сообщается перебежками узла будет равен размеру масштабируемого изображения ...

Таким образом, вы можете использовать что для масштабирования координат MouseEvent:

double x = e.getX(); 
double y = e.getY(); 

ImageView view = (ImageView) e.getSource(); 
Bounds bounds = view.getLayoutBounds(); 
double xScale = bounds.getWidth()/view.getImage().getWidth(); 
double yScale = bounds.getHeight()/view.getImage().getHeight(); 

x /= xScale; 
y /= yScale; 

int xCord = (int) x; 
int yCord = (int) y;