react-native-svgで手書きアプリを作ろう - カミナシ エンジニアブログ

カミナシの浦岡です。弊社が開発している「カミナシ」には、 以下のような用途を想定して、手書きメモ機能を組み込んでいます。 カメラで撮影した写真の上に矢印マークやメモを追加したい キーボード入力に不慣れなユーザーでも素早く簡単にメモを録りたい 手書きで入力できる署名欄 ちょっとした機能ですが、弊社アプリのように現場作業で使われるケースにおいて何かと重宝されている機能です。 今回、react-native-svgを使った実装について紹介します。 手書き線の表現 手書きされた一筆、一筆をsvgのpathタグを使用して表現することにします。 pathタグはd属性に指定された座標群の情報を基に線を描画してくれます。 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d 例えば、以下のように３点の座標を指定すると、それらを結ぶ線ができあがり