JavaFXのスイングペイントコンポーネント

Question

今後の愚かな質問については、事前にお詫び申し上げます。

JPanelがjavaFX用に持っているpaintComponentsメソッドの代わりがありますか？ Swingに埋め込まれているJFXPanelを使用するだけですか？

たとえば、TimelineはSwingのTimerと同じであると考えましたが、Panel/paintComponentsの対応するものは何ですか？

EDIT： たとえば、x-y座標から別の座標に円をアニメーション化するにはどうすればよいですか？ （もちろん、TranslateTransitionを使わないで）

私はキャンバスで絵を描こうとしましたが、Swingでrepaint（）を呼び出すのと同じように、キャンバスを常に更新する方法がわかりませんでしたか？

Answer 1

単純なバインディングを使用して自動的にサイズ変更されるグリッドの例です。あなたはこのために使用できる様々なアプローチの束があります

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class GridTest extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     Grid grid = new Grid(10,10); 
     Scene scene = new Scene(grid.getView()); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

：

import javafx.beans.property.DoubleProperty; 
import javafx.beans.property.SimpleDoubleProperty; 
import javafx.scene.layout.Pane; 
import javafx.scene.shape.Line; 

public class Grid { 
    private final Pane view = new Pane(); 

    private final int numColumns ; 
    private final int numRows ; 

    // arbitrary defaults of 20: 
    private final DoubleProperty prefColumnWidth = new SimpleDoubleProperty(20); 
    private final DoubleProperty prefRowHeight = new SimpleDoubleProperty(20); 

    public Grid(int numColumns, int numRows) { 
     this.numColumns = numColumns ; 
     this.numRows = numRows ; 

     for (int x = 0 ; x <= numColumns ; x++) { 
      Line line = new Line(); 
      line.startXProperty().bind(view.widthProperty().multiply(x).divide(numColumns)); 
      line.endXProperty().bind(line.startXProperty()); 
      line.setStartY(0); 
      line.endYProperty().bind(view.heightProperty()); 
      view.getChildren().add(line); 
     } 

     for (int y = 0 ; y <= numRows ; y++) { 
      Line line = new Line(); 
      line.startYProperty().bind(view.heightProperty().multiply(y).divide(numRows)); 
      line.endYProperty().bind(line.startYProperty()); 
      line.setStartX(0); 
      line.endXProperty().bind(view.widthProperty()); 
      view.getChildren().add(line); 
     } 

     view.prefWidthProperty().bind(prefColumnWidth.multiply(numColumns)); 
     view.prefHeightProperty().bind(prefRowHeight.multiply(numRows)); 
    } 

    public final DoubleProperty prefColumnWidthProperty() { 
     return this.prefColumnWidth; 
    } 


    public final double getPrefColumnWidth() { 
     return this.prefColumnWidthProperty().get(); 
    } 


    public final void setPrefColumnWidth(final double prefColumnWidth) { 
     this.prefColumnWidthProperty().set(prefColumnWidth); 
    } 


    public final DoubleProperty prefRowHeightProperty() { 
     return this.prefRowHeight; 
    } 


    public final double getPrefRowHeight() { 
     return this.prefRowHeightProperty().get(); 
    } 


    public final void setPrefRowHeight(final double prefRowHeight) { 
     this.prefRowHeightProperty().set(prefRowHeight); 
    } 

    public Pane getView() { 
     return view; 
    } 

    public int getNumColumns() { 
     return numColumns; 
    } 

    public int getNumRows() { 
     return numRows; 
    } 

} 

は、ここで簡単なテストです。あなただけのウィンドウを作成する方法書くことができるので、上記のアプローチは本当にすべてでサブクラス化を必要としないことに注意してください：あなたは物事のAWT /春の道に近い何かを望んでいた場合、

private Pane createGrid(int numColumns, int numRows) { 

    Pane view = new Pane(); 

    for (int x = 0 ; x <= numColumns ; x++) { 
     Line line = new Line(); 
     line.startXProperty().bind(view.widthProperty().multiply(x).divide(numColumns)); 
     line.endXProperty().bind(line.startXProperty()); 
     line.setStartY(0); 
     line.endYProperty().bind(view.heightProperty()); 
     view.getChildren().add(line); 
    } 

    for (int y = 0 ; y <= numRows ; y++) { 
     Line line = new Line(); 
     line.startYProperty().bind(view.heightProperty().multiply(y).divide(numRows)); 
     line.endYProperty().bind(line.startYProperty()); 
     line.setStartX(0); 
     line.endXProperty().bind(view.widthProperty()); 
     view.getChildren().add(line); 
    } 

    view.setPrefSize(20*numColumns, 20*numRows); 
    return view ; 
} 

をまたは、 Regionをサブクラス化し、Canvasを使用して、Region.layoutChildren()を上書きすることができます。 layoutChildren()メソッドはレイアウトパスの一部として呼び出されます（リージョンがサイズを変更するとトリガーされます）。

import javafx.scene.canvas.Canvas; 
import javafx.scene.canvas.GraphicsContext; 
import javafx.scene.layout.Region; 

public class Grid extends Region { 

    private Canvas canvas ; 
    private final int numColumns ; 
    private final int numRows ; 

    public Grid(int numColumns, int numRows) { 
     this.numColumns = numColumns ; 
     this.numRows = numRows ; 
     canvas = new Canvas(); 
     getChildren().add(canvas); 
    } 

    @Override 
    protected void layoutChildren() { 
     double w = getWidth() - getPadding().getLeft() - getPadding().getRight() ; 
     double h = getHeight() - getPadding().getTop() - getPadding().getBottom() ; 

     canvas.setWidth(w+1); 
     canvas.setHeight(h+1); 

     canvas.setLayoutX(getPadding().getLeft()); 
     canvas.setLayoutY(getPadding().getRight()); 

     GraphicsContext gc = canvas.getGraphicsContext2D(); 
     gc.clearRect(0, 0, w, h); 

     for (int i = 0 ; i <= numColumns ; i++) { 

      // adding 0.5 here centers the line in the physical pixel, 
      // making it appear crisper: 
      double x = w*i/numColumns + 0.5; 

      gc.strokeLine(x, 0, x, h); 
     } 

     for (int j = 0 ; j <= numRows ; j++) { 
      double y = h*j/numRows + 0.5 ; 
      gc.strokeLine(0, y, w, y); 
     } 
    } 

    @Override 
    protected double computePrefWidth(double height) { 
     return 20 * numColumns; 
    } 

    @Override 
    protected double computePrefHeight(double width) { 
     return 20 * numRows ; 
    } 

} 

は、ここでは、このためのテストです：私はパディングのためのサポートを追加しました。この1でのJavaFXで

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class GridTest extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     Grid grid = new Grid(10,10); 
     grid.setPadding(new Insets(20)); 
     Scene scene = new Scene(grid, 400, 400); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

Answer 2

、GraphicsContext描画面を持っている唯一のものはキャンバスです。キャンバスを拡張し、Canas.getGraphicsContext2D（）を取得し、そこから独自のペイントを行うrepaint（）メソッドを追加することができます。

さらに、ペインを拡張し、オーバーレイされたキャンバスを子ノードとして持つことができます（ペインとキャンバスの幅と高さのプロパティを一緒にバインドします）。 SwingのJPanelと同じように、カスタムペイントをサポートする（そしてキャンバスイベントを介してマウスイベントに反応する）親コンポーネントがあります。