簡易手書きメモウェブアプリをTouchEventの練習がてら作った

ウェブサービス






巷にあるオンラインダイビングログブックアプリが使いにくいので今自分で開発中です。

そのダイビングログブックの機能の一つで手書きメモを保存するという機能を付けていて、MouseEvent (デスクトップブラウザ)では機能していたのだが、TouchEvent (モバイルブラウザ)で機能するようにコードを書いていなかったのでコードを書いてみた。その過程で手書きメモだけの機能で色々試したかったので簡易プロジェクトを作ってみた。


コードはこちら:

GitHub - Gegegegensan/handwritingmemo: Go to https://ryo.app/handwritingmemo/
Go to Contribute to Gegegegensan/handwritingmemo development by creating an account on GitHub.

実際のウェブアプリ:https://ryo.app/handwritingmemo
Reset ボタンでcanvasに書かれた内容を削除し、Saveでcanvasに書かれた内容をpng画像として保存というシンプルなアプリ。実際に手書きでメモをするのであればEvernoteを使うほうが良い。

MouseEventは自分のカーソルの位置を示してくれる offsetX と offsetY があるのでデスクトップブラウザ上でのお絵かき機能は簡単に作成できるのだが、TouchEventにはoffsetX と offsetY がないので正確なタッチ位置を示すために工夫が必要になる。

理解しないといけないこと:

  • .getBoundingClientRect()
  • TouchEvent内のchangedTouches / touches / targetTouches

わかりやすく説明できるようになったらこの投稿更新します。

<< Facebook ページ いいねお願いします

<< ホームに戻る





この記事が気に入ったら
いいね ! してね

コメント

タイトルとURLをコピーしました