javafx-調整圖像大小以保留縱橫比后，訪問圖像的高度和寬度值

Question

大家好，謝謝閱讀。 我目前正在構建圖像注釋工具。 圖像被加載並綁定到父容器（邊框）。 長寬比也被保留。 隨附的代碼段說明了這些要點。

     imageView.setPreserveRatio(true);
     imageView.setSmooth(true);
     imageView.fitHeightProperty().bind(heightProperty());
     imageView.fitWidthProperty().bind(widthProperty());

效果很好：圖像適合窗口並在調整窗口大小時進行調整。

在此之上，我放置了一個畫布，用戶可以在其上繪制矩形。 在繪制矩形之后，將彈出一個窗口，在其中可以編寫注釋。 保存后，用戶可以將鼠標懸停在繪制的矩形上，然后將顯示注釋。

我想知道是否有可能在調整圖像大小以適合窗口之后以及在調整窗口大小的同時調整圖像的大小時訪問圖像的高度和寬度值。

我需要這樣做的原因是，我希望畫布能夠鏡像圖像的尺寸，以便注釋位於其范圍之內。 當前，當調整窗口大小時，由於畫布設置為窗口的尺寸而非圖像的尺寸，因此注釋不會保持“固定”到其區域。

任何幫助將不勝感激。 我碰壁了。 而且甚至不確定我要問的內容是否可以在JavaFX中使用。 再次感謝您的閱讀。

Answer 1

晚上都。 這是我設法為將來可能需要解決類似問題的任何人解決問題的方法。

首先，使用以下代碼創建“可調整大小的畫布”：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;  

class ResizableCanvas extends Canvas {

        public ResizableCanvas() {

            // Redraw canvas when size changes.

            widthProperty().addListener(evt -> draw());

            heightProperty().addListener(evt -> draw());

        }

        private void draw() {

            double width = getWidth();

            double height = getHeight();

            GraphicsContext gc = getGraphicsContext2D();

            gc.clearRect(0, 0, width, height);

            gc.setStroke(Color.RED);

            gc.strokeLine(0, 0, width, height);

            gc.strokeLine(0, height, width, 0);
        }
    @Override

        public boolean isResizable() {

            return true;
        }


    @Override

        public double prefWidth(double height) {

            return getWidth();

        }

        @Override

        public double prefHeight(double width) {

            return getHeight();

        }

    }

完成后，按以下步驟設置舞台：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;


public class ImageViewTest extends Application   {

public static void main(String[] args) {
  launch(args);
}

@Override
public void start(Stage stage) throws Exception {

    ResizableCanvas rc = new ResizableCanvas();
    rc.setOnMouseEntered(e -> {
        System.out.println("entered ");
    });
    Image image = new Image("rushmore.png");

    ImageView imageView = new ImageView();
    imageView.setImage(image);
    imageView.setSmooth(true);
    imageView.setCache(true);


    AnchorPane rootAnchorPane = new AnchorPane();
    AnchorPane resizableCanvasAnchorPane = new AnchorPane();


   rc.widthProperty().bind(resizableCanvasAnchorPane.widthProperty());
 rc.heightProperty().bind(resizableCanvasAnchorPane.heightProperty());


    imageView.fitWidthProperty().bind(stage.widthProperty());
    imageView.fitHeightProperty().bind(stage.heightProperty());
    imageView.setPreserveRatio(true);

    //here's where the 'magic happens'
    resizableCanvasAnchorPane.getChildren().addAll(imageView, rc);
    rootAnchorPane.getChildren().addAll(resizableCanvasAnchorPane,rc);

    Scene scene = new Scene(rootAnchorPane);
    scene.setFill(Color.BLACK);
    stage.setTitle("ImageView Test");
    stage.setWidth(415);
    stage.setHeight(200);
    stage.setScene(scene);
    stage.show(); 
   }

}

非常感謝Dirk Lemmermann和本教程：

https://www.javacodegeeks.com/2014/04/javafx-tip-1-resizable-canvas.html

希望您能看到畫布隨圖像調整大小。 圖像上方有紅色准則，並且有一個鼠標事件來說明這一點。 檢查IDE的控制台，當鼠標在畫布的邊界內時，您會看到一個事件被觸發。

有任何問題，請告訴我。

干杯!