如何在Javafx Gridpane中获得单击调整大小的ImageView的坐标

Question

当前，我单击的位置与打印到终端的坐标之间存在断开连接。看来它是基于中心栅栏的坐标，而不是图像视图的图像本身。

以前，我不会在此应用程序中调整图像大小，而是在自动化的Photoshop过程中调整图像，并且单击/坐标将同步。

这是我制作评估图像的阵列列表的地方，该图像将显示在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

根据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;