HTML5 Canvas で学ぶアフィン変換

10,074 views

Published on

SWF 研究会#2 の LT 資料です

  • 次は3次元のアフィン変換が簡単にできるインターフェイスを備えたちょっとしたライブラリをつくっていかないといけないですね(Canvasで使える計算上の3次元アフィン変換)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 Canvas で学ぶアフィン変換

  1. 1. HTML5 Canvas で学ぶ アフィン変換 2012/09/25 SWF 研究会#2 @a_bicky
  2. 2. 自己紹介• Takeshi Arabiki ‣ 社会人2年目の底辺 Web エンジニア ‣ Twitter & はてな: @a_bicky & id:a_bicky• お仕事 JSX や JavaScript でコードを書いたり• 興味など 機械学習、自然言語処理、R• ブログ あらびき日記 http://d.hatena.ne.jp/a_bicky/
  3. 3. アフィン変換とは?
  4. 4. こういう変換とか ※アニメーションです
  5. 5. こういう変換とか ※アニメーションです
  6. 6. アフィン変換ざっくりした意味 平行移動を伴う線形変換 ✓ 0 ◆ ✓ ◆✓ ◆ ✓ ◆ x a c x tx = + y0 b d y ty 線形変換 平行移動 0 1 0 10 1 x0 a c tx x @ y0 A = @ b d ty A @ y A 1 0 0 1 1同次座標系 1つの行列で線形変換と平行移動を表すために次元を1つ増やす
  7. 7. Canvas によるアフィン変換 0 0 1 0 10 1 x a c tx x @ y0 A = @ b d ty A @ y A 1 0 0 1 1var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.transform(a, b, c, d, tx, ty);ctx.drawImage(img, 0, 0);
  8. 8. 拡大・縮小 0 1 0 10 1 x0 sx 0 0 x 0 sx = w /w @ y 0 A = @ 0 sy 0 A @ y A 元の画像 0 1 0 0 1 1 w 0 1 w sx x x = @ sy y A 1 0 h h var canvas = document.getElementById("canvas"); 0 var ctx = canvas.getContext("2d");sy = h /h ctx.scale(sx, sy); y ctx.drawImage(img, 0, 0);
  9. 9. 回転 0 0 1 0 10 1 x cos sin 0 x @ y 0 A = @ sin cos 0 A@ y A元の画像 1 0 0 1 1 0 1 x cos y sin ✓ x = @ x sin + y cos A 1 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.rotate(theta); y ctx.drawImage(img, 0, 0);
  10. 10. 平行移動 0 0 1 0 10 1 x 1 0 tx x @ y0 A = @ 0 1 ty A @ y A元の画像 1 0 0 1 1 0 1 tx x + tx ty x = @ y + ty A 1 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.translate(tx, ty); y ctx.drawImage(img, 0, 0);
  11. 11. 剪断 0 0 1 0 10 1 x 1 tan ⇥ 0 x @ y 0 A = @ tan 1 0 A@ y A元の画像 1 0 0 1 1 0 1 x + y tan ⇥ ↵ x = @ x tan + y A 1 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.transform(1, Math.tan(alpha), Math.tan(beta), 1 y 0, 0); ctx.drawImage(img, 0, 0);
  12. 12. デモ アフィン変換 デモ時間がないのでやりません! http://abicky.net/swf_study/2/インタラクティブに変換してみたい人は是非お試しください!
  13. 13. 自作 Flash Player あるある
  14. 14. 特定のシェイプが表示されない><
  15. 15. い ? て な でき ース く パ 正 し 像 を画 変換行列がおかしい?透過 い ? 度の か し 問題? お 序 が 画順 描
  16. 16. い ? て な でき ース く パ 正 し 像 を画 変換行列がおかしい?透過 い ? 度の か し 問題? お 序 が 画順 描
  17. 17. Canvas では現在の変換行列を 取得できない... orz
  18. 18. 作った!HTML5 の Canvas で getTransform が使えるようにしてみた - あらびき日記 http://d.hatena.ne.jp/a_bicky/20120724/1343084686 ← ロードすると getTransform が使える
  19. 19. ここで問題
  20. 20. Canvas でx, y 軸方向に2倍する変換行列を適用してからx, y 軸方向に1移動する変換行列を適用すると どうなるか?
  21. 21. 正しいのはどっち? 1 1 1 1 21 1 2
  22. 22. 正しいのはどっち? 1 1 ○ 1 1 21 1 2
  23. 23. 正しいのはどっち?
  24. 24. 正しいのはどっち? ○
  25. 25. 最初 getTransform は 逆になってた ><
  26. 26. 簡単な解説 元の座標系での値 スケール2倍の座標系での値 2 1 1 1 1 11 1 1 1 2 1 スケールを2倍した座標系で1移動する スケールを2倍する (元の座標系では2移動することになる) スケールを2倍する (移動した上での2倍なので 移動量も2倍になる) まず1移動する
  27. 27. まとめ
  28. 28. まとめ• アフィン変換は平行移動伴う線形変換• Canvas で変換行列の状態を取得する getTransform を作った• 複数の変換行列を適用する場合は最初に適用するものが 最左にくる
  29. 29. 参考• アフィン変換とは - 大人になってからの再学習• にゃあプロジェクト - ウェブログ - Matrixって何だお? (1)• アフィン変換 画像処理ソリューション• 無職のプログラミング  [HTML5 Canvas]変形メソッド scale(),rotate(),translate() の実行順序

×