0

たとえば、4つの方向ボタンを使用して移動できる内<img>があります。<div>

ここに画像の説明を入力してください

画像は明らかにそのコンテナよりも大きいため、画像をさまざまな方向に移動するための方向ボタンがあります。

ズームインおよびズームアウトできるズームコントロールもあります。ベースの幅と高さにパーセンテージでズーム率を適用するだけで、スケーリング方法を簡単に設定できます。

scale: function(zoom)
{
    image.width = baseWidth * zoom;
    image.height = baseHeight * zoom;
}


// Zoom in 50%.
Scene.scale(1.5);

これは問題ありませんが、画像は左上から拡大縮小されます。つまり、ズームインすると左上に向かって吸い出され、ズームアウトすると元に戻るように見えます。

次のように、コンテナの中央からズーム効果を適用しようとしています。

ここに画像の説明を入力してください

しかし、この効果を与えるためにスケーリングが適用された後、画像を移動するために必要な数学に頭を悩ませることは難しいと感じています。

私が得た最も近い方法は、現在のズームと新しいズームレベルの差に基づいて画像を移動することですが、それでもわずかにずれており、ズーム時に「湾曲した」効果が得られます。

別の原点（つまり、左上（0,0）ではない）を中心に拡大縮小するように画像を再配置するために使用される一般的な式はありますか？

これが現在の様子です。

4

1 に答える 1

0

元の座標を取得し、元の画像の中心を計算する必要があります。つまり、x_center = x_orig + width_orig / 2; 次に、スケーリングされた画像の新しい x 座標を計算できます: x_new = x_center - width_new / 2. 同じことが y にも当てはまります。次に、スケーリングされた画像をこれらの新しい座標に移動します。画像を拡大縮小するたびにこれを行うと、中心を中心に拡大縮小されたように見えます。

于 2012-11-01T06:39:46.113 に答える