どうも！LSSです！！
【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software
に少し機能追加したバージョンです。
簡易お絵描きアプリ
高 : px
使い方
グレーの格子模様の四角形がキャンバスです。
キャンバス上で、マウスの左ボタンを押しながらマウスを動かすか、スマホ・タブレット等のタッチ操作可能な端末では指またはペンで、線を描く事ができます。
タッチ操作の場合、筆圧によって線の太さを調整できます（筆圧感知対応端末の場合）。
キャンバスの↑にあるスライダー及び「-」「+」のボタンで、キャンバスの幅・高さを変更する事ができます。（ボタンは微調整用で、１ピクセル単位で変更できます。）
キャンバスの↓にあるもののうち、一番最初にあるで、線の色を変更できます。
「全て消す」ボタンはキャンバスをリセットします（確認ダイアログが出ます）。
「全塗り」ボタンはキャンバスを指定色（線の色と同じ）で全面塗り潰します（確認ダイアログがでます）。
↑透過じゃない画像を作りたい場合には一番最初に行うと良い操作ですね。
「ファイルとして保存」は、現在のキャンバスの状態をPNG形式の画像ファイルとしてダウンロード保存できます。
※端末機種・ブラウザの種類によっては出来ない場合があったり、手順がややこしかったりしますので、あらかじめ試していただく事を推奨します。
「元に戻す」は、いわゆるアンドゥ機能です。
「やり直す」は、いわゆるリドゥ機能です。
操作のうち「線を引く」「全て消す」「全塗り」のいずれかを行った際に、操作後のキャンバスの状態が「履歴」として順次記録されます。
直前に行った操作を「無かった事にしたい」場合に「元に戻す」を押すと、直前の状態に戻す事ができます。
「やっぱり元に戻すをキャンセルしたい」場合は「やり直す」を押すと、「元に戻す」をキャンセルできます。
試作品＋ゆえの謎仕様
タッチ操作を行った場合、「元に戻す」「やり直す」の下に、
touches[0].force:数値
radiusX:数値
radiusY:数値
という意味不明な文字列が表示されます。
これらはデバッグ用？として試験的に表示させています。
forceは筆圧感知、radiusは指操作の場合の画面に触れている点の大きさを示しています。
例えばforceは0.0～1.0の間の小数になるハズですが、自分の手持ちの端末のうちAndroidスマホ（エクスペリア 型番SOV38）は「圧の代わりに設置面積で代用している」という情報があり、出ないハズの1以上の数値が出たりします^^;;;
（そのくせ、radiusの数値は一定値から変化しないというのも謎…）
これから色々確認して行こうと思いますが、もし「forceの値が1以上になった」方がおられましたら、機種名やOS、ブラウザ種類をコメントで教えていただけると幸いです^^
ファイルとして保存、について現在判明している事
前回記事に追記として書いた内容ですが、
WindowsPC＋Chrome…問題無し。
Androidスマホ＋Chrome…問題無し。
iPhone7（iOS15.6.1）はSafariやChromeでは問題無し。
ただし、スマホ+はてなアプリでは「ファイルとして保存」が何故か効かない、という状況です。
iPhone＋Twitterアプリから開いた場合、「ファイルとして保存」ボタン→「次の方法で開く」→「画像に保存」ではなく、下にスクロールして「”ファイル”に保存」→保存場所を選び、右上の「保存」をタップ、という手順を踏む必要があります。
が判明しています。
iPhone＋Twitter（Twitterアプリ内に表示された場合）がややこしい落とし穴ですね^^;;;;
履歴機能の実装
今回の更新の最大の目玉と言える履歴機能（元に戻す・やり直す）。
これを実現できたのは、canvas要素の「getImageData」「putImageData」のおかげです^^
それぞれ、
hst.push(cnvx.getImageData(0,0,cnvs.width,cnvs.height));
cnvx.putImageData(hst[hsti],0,0);
のような形で、「hst」と名付けた配列変数にイメージデータを追加、「hst」配列の添え字「hsti」のデータをキャンバスに描きだす、という操作を行っています。
※任意の名前部分をオレンジ文字にしてみました。
これを応用すると、他にレイヤー機能をつけたり、仮描画を必要とする複雑な機能を追加したりできそうです…が、あまり多機能にしたくもなかったりｗ
でも線をもっと綺麗な線にしたいな、とは思っていたりもします。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
