お絵描きしたデータをJSONファイルにしてローカルに保存できるようにした。
作ったもの
ドロップダウンメニューから「保存」-「JSON形式」をクリックすると、
ファイルのがダウンロードできる。
メニューには「読み込み」があるが未実装。
クラス図
数が増えてきて見にくかったので、
メンバを非表示にし、クラスの依存関係のみを表示した。
DrawLayerクラスに描画されている内容をCanvas2DrawLayerDataクラスで解析して、DrawLayerDataクラスを作成する。
PixcelArtDataクラスはDrawLayerDataクラスをまとめる役割。
将来的にレイヤー数を増減できること想定しているため、Data系クラスの構造や処理が複雑になってしまった。
つまづきポイント
色・座標データ抽出は、絵周囲の空白領域の除外が重要
ファイルにデータを書き出すにあたり、できる限り不要なデータは除外したかった。
Canvasから色情報を取得すること自体は難しいことではないが
それだと絵周辺の空白領域の情報も含んでしまうため不要なデータを多く含んでしまうことになる。
そのため、処理を
１．どこまでが空白領域なのかを調べる
２．１で得た情報をもとに、絵の描かれている領域の色情報を取得する
と二段階にわけた。
TypeScriptではクラスの多重継承ができない
ドロップダウンメニューはBootstrapのコンポーネントを利用しているが
これの処理を拡張するためにFileDropdownMenuクラスを作成した。
当初はbootstrap.Dropdownを継承して作成していたが、
イベント発火やイベントリスナーの機能も欲しくなり、
createjs.EventDispatcherも継承したくなった。
しかし、TypeScriptでは多重継承ができないので、
bootstrap.Dropdownの継承をあきらめ、
createjs.EventDispatcherのみ継承するラッパークラスにした。
参考：TypeScript での多重継承 | Delft スタック
File System Access APIがTypescriptでエラーになった
ローカルにファイルを保存する際にFile System Access APIを利用しようとしたところ、
TypeScriptのエラーがでてしまいコンパイルができなかった。
調べてみたところ、TypeScript側の問題のようで
以下のパッケージをインストールしたら無事にコンパイルできた。
npm i -D @types/wicg-file-system-accessなお、File System Access APIはChromium系ブラウザでのみサポートされており、
FirefoxやSafariではサポートされていないようなので、
それらに向けては、Aタグを使った従来のダウンロード方法で実装した。
参考：javascript – Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function – Stack Overflow
File System Access APIを使ってローカルファイルの読み書きを試してみる – Qiita
ファイルをダウンロード保存する方法 – JavaScript の基本 – JavaScript 入門
追加したイシュー
ひとこと
書き出したデータの内容が正しいかどうかは、読み込んでみないとわからない…。
