[JavaFX]決まったスケールで描画されたCanvasを可変なスケールに拡大したい。

Question

前提・実現したいこと

KotlinにおいてJavaFXのゲームを作ってます・。決まったスケールで描画されたCanvasを可変なスケールに拡大したい。の題の通り、
<Canvas height="720.0" width="1080.0" fx:id="canvas2"/>
に1080*720で描画をしつつ、Nodeとしては、ウィンドウのサイズに合わせるように作りたいのですがうまくいきません。

試したこと

(Kotlin)

class ControllerMCMC {

    @FXML
    lateinit var canvas1: Canvas

    @FXML
    lateinit var canvas2: Canvas//該当

}
//省略
class <アニメーションタイマー> : AnimationTimer() {
    
    override fun handle(now: Long) {
        controller.canvas2.height = stage.height
        controller.canvas2.width = 1080.000 * (stage.width/1280.000)
    }
}

上のように合わせていますが、これだと描画時に1080*720の外にも描画されますし拡大はできません。（あとcopySnapshotがうまく動かなかったり）

補足情報（FW/ツールのバージョンなど）

Kotlin Java8 JavaFX。Paneはfxml記述。

ここにより詳細な情報を記載してください。

Answer 1

以前、JavaFXのCanvasを使った世界地図を表示するプログラムの作り方についてセッションをしたときのスライド資料が次です。
世界は四角ではない～JavaFXで地図を描く

• p.37に画面サイズにCanvasサイズを追従させるコード断片を記載しています。
• p.52にマウスホイール操作でCanvasの描画を拡大縮小するコード断片を記載しています。

FXMLで画面レイアウトを定義していれば、FXMLのルートノードのwidthPropertyとheightPropertyをCanvasのwitdhPropertyとheightPropertyに「バインド」します。あとはウィンドウの大きさを変えるとルートノードの大きさが追随して変わり、ルートノードにバインドしたCanvasの大きさが追随して変わります。

public class TinyMapViewController implements Initializable {
    
    @FXML
    private Canvas mapCanvas;
    @FXML
    private Pane rootPane;
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        mapCanvas.widthProperty().bind(rootPane.widthProperty());
        mapCanvas.heightProperty().bind(rootPane.heightProperty());
    }    
    
}

アニメーションタイマーのhandleメソッドは最大で16ms毎に呼ばれ、ここにはCanvasのgraphicsContext2Dを取り出して描画する処理を記述するのではないかと思います。

Comments

[KSwordOfHaste]

一度canvasへ描画したらサイズが変化しても再描画しないという仮定でコメントしてみたのですが、
むしろcanvasの大きさを変化させ、それに応じて再描画する前提で実装しておくと刻々と描画内容が変わるような応用にもマッチするし、テキストの大きさが縮尺によってぼやけたりする問題にも対処しやすいという意味でより柔軟な方法に思えました。

Answer 2

1. width, heightを直接書き換えてもスケール(縮尺)は変わりません。縮尺を制御するにはアフィン変換行列リスト(transformsプロパティー)やscaleX, scaleYプロパティーなどを使うことになると思います。

2. ウィンドウサイズに合わせる

ウィンドウサイズはデコレーション部分（タイトルとか）も含む大きさなので基準にするには少々やっかいな面があるかと思います。Sceneを基準にするとよいのではないでしょうか。

もしシーン全体を覆うようなキャンバスならscaleX, scaleYを用いてみるとよいと思います。

いずれにせよ座標変換は結構複雑でなかなか難解です（少なくとも自分にとってはそうです）。NodeのAPIリファレンスに座標変換に関する解説が若干ありますが、それを一通り読んでも、ちょこっと試した程度では(色々な落とし穴があるため)すんなり期待通りにはいかないことが多い気がします。またシーングラフをどういうノードで構成するかによっても振る舞いがガラっと変わったりもします。

そんなわけで質問の際には「短いけどもそのまま再現できるようなコード」を添付するのがよいと思います。