位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。
- drawImageメソッドの引数で貼り付けサイズを指定する
- scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける
- transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける
1についても、位置調整と同様、drawImageの引数を変化させるだけでOKです。2、3はいずれも変形マトリックスの調整になりますが、使うメソッドが違います。単純に拡大縮小するだけであれば2の方が簡単です。
drawImageメソッドの引数で貼り付けサイズを指定する
drawImage(image, dx, dy, dw, dh)と、dw、dhの引数を指定すると、貼り付け先のサイズを指定することができます。元画像に対して縦横比を維持して拡大縮小する場合は、dw、dhをそれぞれ元のwidth、heightに任意の倍率を掛けたものにすれば良いのです。
なお、この場合元画像のサイズを指定しなくてはなりませんが、貼り付ける画像の元のサイズが一定ではない場合、画像のサイズをjavascript上で取得する必要があります。（元画像のサイズに関係なく、貼り付け先の標準サイズが固定の場合は考慮しなくて良いと思います）
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 – latest log
scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける
変形マトリックスを操作する方法その1です。scale(x, y)のxとyでそれぞれx方向とy方向の拡大縮小を適用します。xとyに全然違う値を入れてもいいのですが、画像のアスペクト比を保って貼る場合は同じ値にします。
こちらも変形マトリックスを操作するので、drawImageで貼り付けた後に元に戻すため、逆数を指定し直しています。これを忘れると拡大縮小を行った状態から、指定の値で更に拡大縮小されていくようになってしまいます。
transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける
transformメソッドは、引数の指定の仕方がとても難しいのですが、その分1つで色々な変形を一気に指定できます。単純に拡大縮小する場合は、transform(m11, m12, m21, m22, dx, dy)のm11とm22に倍率を入れてあげればOKです。詳しいことはリファレンスを参照してください。
transform() メソッド – Canvasリファレンス – HTML5.JP
拡大縮小を行うだけならば、scaleメソッドで十分です。transformメソッドは、同時に回転をしたりする場合に使うと便利です。iconDecotterでは、フレーム画像の拡大縮小と回転を同時に行なっているので、transformメソッドの方を採用しています。
ちなみに、変形マトリックスの状態を直すために、こちらのサンプルではsaveメソッドとrestoreメソッドを利用しています。
save(), restore() メソッド – Canvasリファレンス – HTML5.JP
scaleメソッドの方では、同じメソッドで逆数を再適用していましたが、変形マトリックスを操作する前にsaveしておき、drawImageが終わった後にrestoreするという方法でも、変形マトリックスを元に戻せます。ただし、save・restoreは変形マトリックスだけでなく、描画スタイルやクリップ領域も保存して戻すものですので、今回のような画像を操作するケースでは特に考慮は要りませんが、各メソッドによる描画も同時に行なっている時は、saveとrestoreのタイミングはよく考えて行う必要があります。
おまけ
横と縦の拡縮倍率は個別に指定するようにすれば、当然このようになります。
コメント