[暇だったので小Webアプリ]:Hau Visualizer

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

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

hauvis.png

やりたいこと

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

やれること

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

以上.

使った技術

  • 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をしているときにうまく切り取る方法がわからず…

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

 

About the author

コメントを残す