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(); 
    } 

} 

ビッグおかげでもダークLemmermannと、このチュートリアルに行きます：

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

うまくいけば、あなたが見ることができますキャンバスがイメージでサイズ変更されることを示します。画像上には赤いガイドラインがあり、これを説明するマウスイベントがあります。 IDEのコンソールを確認すると、マウスがキャンバスの範囲内にあるときにイベントが発生することがわかります。

質問がありましたら、お知らせください。

乾杯！