はじめに
前回は本連載で作るお絵描きアプリのプロジェクトを新規作成し、一筆書きでお絵描きをできるようにしました。
今回は前回に引き続き追記して行って、お絵描きアプリをグレードアップさせます。<canvas>タグは、幅の高さをリサイズや、マウスホイールでアンドゥやリドゥしたり、サンプル画像を表示したりします。今回もまだバックエンドのRustは書き換えません。
描画矩形をリサイズする
前回のコードに続けて、次のサンプルコードを追記します。
次のコマンドを実行しプロジェクトをデバッグビルドしたら、お絵描きする<canvas>タグの描画領域が画面幅いっぱいになります。<canvas>タグはウィンドウがリサイズされるたびに同時にリサイズします。
最初<canvas>タグの高さをウィンドウの内高さと同じ高さにセットして、ウィンドウの内いっぱいに<canvas>を広げようとしたところ、ウィンドウにスクロールバーが出てしまいました。そこで仕方なく<canvas>の高さを少し減算して、代わりにそこに説明文を追加しました。
$ cargo-tauri dev
(前略)
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
(中略)
window.addEventListener("resize", resize, false);
resize();
});
// キャンバスリサイズ
function resize() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight-40;
line();
}
(後略)
サンプルコードの解説
ウィンドウのリサイズイベントが起こったら、「resize」関数の呼び出しをフックします。その後、htmlファイルのDOMが読み込み完了したらresize関数を呼び出します。
resize関数で<canvas>タグの幅をウィンドウの内幅と同じにセットして、<canvas>タグの高さをウィンドウ内高さから40減算したサイズにセットします。
コラム：ESモジュールはWebサーバ上でしか動作しない！
従来のHTMLではJavaScriptはローカルのWebブラウザでもほとんどの機能が動作していました。しかし最新のESモジュールのJavaScriptはWebサーバ上でしか動作しません。ただしTauri 2.0上ではHTML5＋CSS＋JavaScriptをWebサーバ上で動かしているのと同じなので動作します。
またTauri 2.0のデフォルトのテンプレートではJavaScriptはESモジュールになっていますが、従来のJavaScriptももちろん動作します。
コラム：Tauri 2.0向けのWebページだけをWebブラウザでテストするには？
Tauri 2.0向けのWebページはhtmlファイルとcssファイルはそのままでも動作します。問題はjsファイルです。
ESモジュール（type="module"）を使わなければ、JavaScriptの「window.__TAURI__」がつくコードをコメントアウトして、処理に合わせて代入する値などを変えることで、Webサーバ上じゃなくてもローカルのWebブラウザで動作テストができます。
