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
あるある

14. 特定のシェイプが
表示されない＞＜

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() の実行順序