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