如何在JavaFX Gridpane中獲取調整大小的ImageView的單擊坐標

Question

當前，我單擊的位置與打印到終端的坐標之間沒有連接。 看來它是基於中心GridPane的坐標，而不是imageView的圖像本身。

以前，我不會在此應用程序中調整圖像的大小，而是在自動的Photoshop流程中調整大小，並且單擊/坐標將保持同步。

這是我制作大小調整后的圖像的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

根據serveRatio 的文檔 ：

…由節點范圍報告的該節點的尺寸將等於縮放圖像的大小…

因此，您可以使用它來縮放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;