Canvas の scale でアニメーションしてみる

とくに何も考えずにスケールアップしてみると、右下のほうに動いていって驚いた。

イメージとしては対象のオブジェクトだけをスケールしたつもりなのだけれど、実際は ctx.scale(x, y) しているので、canvas 全体がスケールされる。

つまり、オブジェクトの位置もスケールされている。

例えば x = 10 y = 10 の座標を持ったオブジェクトは、1.1倍にスケールされると x = 11 y = 11 の座標に描画される。

こんな風に。

こいつをなんとかオブジェクトの中心を起点にスケールさせたい。

一番簡単な方法は、元の位置からスケールした分を引き算すればいい。

さらに、オブジェクトの中心に座標を移動させるため、オブジェクトの幅と高さの半分を座標から引く。

ひとつひとつ順を追っていけば案外簡単なのだけれど、スキップして考えようとすると、案外ハマる。うーん。

var transformedPoint = { x: mylocation.x - (mylocation.x * myscale.x) - (mysize.w * myscale.x * 0.5), y: mylocation.y - (mylocation.y * myscale.y) - (mysize.h * myscale.y * 0.5) } ctx.transform(myscale.x, 0, 0, myscale.y, transformedPoint.x, transformedPoint.y);

これで無事中心でスケールされるようになった。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です