巷にあるオンラインダイビングログブックアプリが使いにくいので今自分で開発中です。
そのダイビングログブックの機能の一つで手書きメモを保存するという機能を付けていて、MouseEvent (デスクトップブラウザ)では機能していたのだが、TouchEvent (モバイルブラウザ)で機能するようにコードを書いていなかったのでコードを書いてみた。その過程で手書きメモだけの機能で色々試したかったので簡易プロジェクトを作ってみた。
TouchEventにoffsetX offsetY がないのを今更知って試しに作った簡易手書きメモ保存 MouseEvent TouchEvent、全画面対応
MDNに載ってるコードよりわかりやすく簡易にできた模様https://t.co/AQ8SBjKQjd— げん (@Gegegegensan) May 3, 2020
コードはこちら：
GitHub - Gegegegensan/handwritingmemo: Go to https://ryo.app/handwritingmemo/
Go to Contribute to Gegegegensan/handwritingmemo development by creating an account on GitHub.
github.com
実際のウェブアプリ：https://ryo.app/handwritingmemo
Reset ボタンでcanvasに書かれた内容を削除し、Saveでcanvasに書かれた内容をpng画像として保存というシンプルなアプリ。実際に手書きでメモをするのであればEvernoteを使うほうが良い。
MouseEventは自分のカーソルの位置を示してくれる offsetX と offsetY があるのでデスクトップブラウザ上でのお絵かき機能は簡単に作成できるのだが、TouchEventにはoffsetX と offsetY がないので正確なタッチ位置を示すために工夫が必要になる。
理解しないといけないこと：
- .getBoundingClientRect()
- TouchEvent内のchangedTouches / touches / targetTouches
わかりやすく説明できるようになったらこの投稿更新します。
<< Facebookページ いいねお願いします
コメント