お絵描きアプリをグレードアップさせよう！Tauri 2.0でアンドゥとリドゥを実装

フロントエンジニアのための「Tauri 2.0」ではじめるRustプログラミング　第5回

サンプルのデータを表示する

　独自形式ファイルを読み書きして一筆書きのデータを表示する前に、サンプルデータをプログラムに内蔵させます。サンプルは単なる1次元配列で、前回解説したようにコントロールポイントと頂点の4要素で1つの頂点データになります。具体的なサンプルは、トイプードルの絵です。

トイプードルのサンプル

　次のサンプルコードを追記してプロジェクトをデバッグビルドして実行したら、画面下の説明のSampleリンクをクリックすればトイプードルが現れます。変数名をsmpl変数にしましたが、sample変数にするとsample関数と被るのでプログラムが上手く動きません。

Sampleリンクをクリックしたところ

サンプルコード「src」→「main.js」

(前略)
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
  (中略)
  let smpl = document.querySelector("#sample");
  smpl.addEventListener('click', (e) => { sample(); });
});
// サンプルのデータを表示する
function sample() {
  _pos = [735,377,735,377,735,285,832,280,904,225,826,201,766,247,829,280,937,279,937,279,896,220,949,205,1023,253,937,279,1033,297,1032,366,1008,440,833,446,786,414,796,386,856,370,881,392,885,434,831,445,732,411,735,378,732,314,764,178,715,424,686,396,544,339,590,234,667,4,789,27,938,-5,1017,31,1179,9,1225,244,1254,440,1103,385,1073,343,1069,177,1075,395,1065,392,1433,605,1436,782,1595,763,1616,843,1602,878,1447,859,1416,943,1301,929,1210,918,1208,859,1245,817,1317,829,1206,815,1209,692,1137,602,1137,602,1225,927,1219,928,1106,964,1024,927,1030,604,1030,604,1019,766,929,596,963,926,947,922,820,954,780,910,768,876,807,576,800,433,800,433];
  _current = _pos.length/4;
  line();
}
(中略)

サンプルコードの解説

　htmlファイルのDOMが読み込み完了したら、idがsampleのセレクタをクリックして「sample」関数を呼ぶようにフックします。

　sample関数で、_pos配列に配列の要素をセットします。これはトイプードルのデータです。現在の頂点データ数_current変数を_pos配列の要素数を4で除算します。

コラム：_pos配列の具体例

　ここまで「_pos」配列にはベジェ曲線の情報の[コントロールポイントX1,コントロールポイントY1,頂点X1,頂点Y1,コントロールポイントX2,コントロールポイントY2,頂点X2,頂点Y2,・・・]が繰り返し入るように書いてきました。

　その具体例としてトイプードルの図形を使ってやっと中身の数値をお見せすることができました。やっぱりこうやって具体的な数値を書かないとなかなかデータの中身は実感できませんね。

アプリアイコンを変更する

　「$ cargo-tauri build」でリリースビルドしたりインストーラが作成できることは第1回で解説しました。その際アイコンはデフォルトのままだったので、一度にアプリアイコンを作れる方法を解説します。

　アプリアイコンは必ずオリジナルのアイコンに変更してください。1024x1024ピクセルの画像「src-tauri」→「icons」→「app.png」ファイルを用意して、次のコマンドを実行したら、次の図のようにさまざまな大きさのアイコンが作成されます。もちろんプロジェクトがカレントディレクトリの場合です。

「app.png」ファイルからアイコンを作成

$ cargo tauri icon src-tauri/icons/app.png

「app.png」ファイルから作成されたアイコン

おわりに

　今回はウィンドウサイズに合わせて<canvas>タグの描画領域を広げたり、アンドゥやリドゥをマウスホイールで実装したり、サンプルの絵を描画したりしました。

　次回は長らくお待たせしましたが、やっとTauri 2.0の神髄であるバックエンドのRustをプログラミングしていきます。Rustでメニュー機能を使ったりTauriコマンド関数でフロントエンドとデータをやり取りしたりします。