Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG + React でつくる レイヤーの自由変形 / Layer Transformati...

fsubal
March 05, 2019

SVG + React でつくる レイヤーの自由変形 / Layer Transformation with React + SVG

2019/03/05 #https://techsalon.pixiv.co.jp での LT 資料です。

途中で出てくる「ニコナレのこれ」はこちらに移行済 → https://speakerdeck.com/fsubal/karihua-hananfalseyi-nili-tufalseka

fsubal

March 05, 2019
Tweet

More Decks by fsubal

Other Decks in Technology

Transcript

  1. 2 誰 • 2016年新卒入社 • sensei ➔ pixiv 投稿画面 ➔

    pixivFACTORY • React / Redux / SVG @f_subal
  2. 3

  3. 4

  4. • Adobe 製 SVG 何でもやる系ライブラリ。 • react-* とかじゃない、Framework Agnostic •

    Snap(el).drag(fn, fn, fn) で要素を draggable にできる • これを使えば優勝…! 30 Snap.svg
  5. • なんと、mousemove にしか対応してない • タッチデバイスは動かない ◦ Snap.svg と同じ API の

    touch 用 draggable ライブラリを自作して対応 • 現状、mouse は Snap.svg、touch は自作ライブラリ になってる ◦ 両方対応ライブラリを目指す… 32 Snap#drag is mouse ONLY
  6. 33

  7. • アフィン変換 ◦ 線形変換 + 平行移動 を行列式で一手に扱う数学のアレ ◦ 「シアー」みたいな複雑な変換も行ける。 •

    ホモグラフィ ◦ ↑ に加えて「台形」とか「ゆがみ」とかもいけるやつ ◦ 任意の四角形にできる 37 アフィン変換 ? ホモグラフィ ?
  8. • 事実上おなじことやってるんだけど、良い感じの行列ライブラリとかないし ◦ Snap.svg の matrix クラスとかあるけど…まぁ… • 移動とか、単に座標の足し算で書いたほうが読み書きしやすいし •

    回転も、回転中心とカーソルの位置から atan2 だけで済むし • ひとまず手早く書けて可読になるだろうと期待して愚直に 38 が、今回は使わずに実装する
  9. 39

  10. • 水平な矩形の拡大は簡単 ◦ マウスカーソルが動いた分を width と height に足すだけ • けど

    30° 右に傾いた矩形の拡大はめんどい ◦ これだけは回転行列を使わないと無理 40 唯一の障壁「回転を考慮した拡大」
  11. 42

  12. • px ➔ mm 変換関数を作る必要がある • 1mm が 何 px

    に相当するかは window の横幅に依存する ◦ リサイズのたびに関数を作り変える • viewBox のある要素を見れば現在 1mm が何 px に相当するか計算できる ◦ dpi なり dpm が求められる 45 単位換算
  13. • SVG の draggable 対応 ◦ 思ったよりライブラリがないので DOM API と戦おう

    • 座標計算 ◦ 行列計算にひるまずに実装しましょう ◦ ただ、基本的な変形は案外足し算レベルでいけたりもします • 単位換算 ◦ px と それ以外が混在する要件に気をつけよう! 49 自由変形に必要なこと (っぽいもの)