Question

目前，我点击的位置和打印到终端的坐标之间存在断开连接。它似乎是基于中心GridPane的坐标，而不是imageView的图像本身。

以前，我不会在此应用程序中调整图像大小，而是在自动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

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

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

1 个答案: