暇だったので小Webアプリ作った.Twitterツールとしているけど、画像添付してツイートする部分は一手間なままなので、そこまでTwitterツール感はないです.

https://urusulambda.github.io/products/hau-vis/index.html

やりたいこと

自分の体で痛い部分を可視化して画像にするアプリ.

やれること

• 体の痛い部分を赤く塗れる
• 間違った部分を白く塗れる
• 画像を保存できる

以上.

使った技術

• Fabric.js
• JQuery

以上

途中困ったこと

• Fabric.jsのドキュメント不足でSprayBrushに気づけなかった.
• そしてSprayBrushのサンプルコードが少なすぎて、コードを見る羽目に
• clip-pathでクリップしようとしてたらFabric.jsのcanvasではclipToという関数があった
• clipToすると背景が透明になってしまう.白くするようにbefore:renderにフック
• clip-pathにしろclipToにしろどういう風にパスを作ればいいかわからず
• clip-pathを作るサイトを見つけたので、その値をclipTo用に変換
• twitterのshare用URLには画像添付できないことをあとで知る.
• ローカルに画像ファイルを保存する方法がわからなかった.

他雑記

うまくクリップする部分が一番調べるのに時間がかかった.
どうもSprayをしているときにうまく切り取る方法がわからず…

などなど意外と調べるのが大変な要素が多かったです.