8

私のアプリの一部には、ユーザーがコンテナー内の画像をズームインおよびズームアウトできる必要があるという点で、Google マップに似た機能が含まれています。

Googleマップと同じように、ユーザーがマウスホイールでスクロールできるようにし、画像上のピクセルを常にマウスポインターの真下に置いておきます。したがって、基本的に、ユーザーはマウス ポインターがある場所にズームします。

ズーム/翻訳のために、私は次のようにcss変換を使用しています:

見える

   $('#image').css({
            '-moz-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-moz-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-webkit-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-webkit-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-o-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-o-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-ms-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-ms-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              'transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            'transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px'
            });

これを行う方法のさまざまな実装を見つけることができましたが、マウスイベントを補間して勢いを与えるために自己ロールスムーズスクロール技術を使用しています。

この 2 つを正しく連携させようとするのは面倒です。

ここに大量のコードを貼り付けるのではなく、これまでに使用したズーム機能とともにマウスホイールのスムーズスクロール技術を含む jsFiddle を作成しました。

http://jsfiddle.net/gordyr/qGGwx/2/

これは基本的に、私のアプリのこの部分の完全に機能するデモです。

マウスホイールをスクロールすると、jqueryui スライダーが補間され、運動量/減速が正しく提供されることがわかります。ただし、ズームは正しく反応しません。

マウスホイールを 1 点だけスクロールすると、ズームは完全に機能しますが、それ以上のスクロールは機能しません。これは、画像の縮尺が変更され、計算が不正確になったためだと思います。私はこれを補おうとしましたが、これまでのところ運がありません.

要約すると、画像が常にマウスポインターに直接ズームするように、jsFiddle のコードを変更したいと思います。

喜んで助けてくれる人に、前もって感謝します。

4

1 に答える 1

10

css3 遷移を使用すると、より簡単に実行できます。
例: http://jsfiddle.net/BaliBalo/xn75a/
メインのセンターマウス アルゴリズムは次のとおりです。

//Center the image if it's smaller than the container
if(scale <= 1)
{
    currentLocation.x = im.width() / 2;
    currentLocation.y = im.height() / 2;
}
else
{
    currentLocation.x += moveSmooth * (mouseLocation.x - currentLocation.x) / currentScale;
    currentLocation.y += moveSmooth * (mouseLocation.y - currentLocation.y) / currentScale;
}

既存のコードを保持したい場合は、ほぼ同じようにできると思います。画像自体がcssスケール変換によってズームされ、transform-originを使用しているときに、ズームされた画像でマウスの位置を取得するトリックは、変換原点をポイントに差し引いてから、係数を掛けて、最後に変換原点を再度追加します。

この更新された例のように翻訳を使用することもでき ます: http://jsfiddle.net/BaliBalo/xn75a/15/ {0, 0} を平行移動すると、画像の中央がズームされます。

編集：

私は今日、この私の答えに出くわしましたが、それは本当にあなたが望んでいた動作ではないと考えました. マウスの下のポイントを中央に配置するのではなく、同じ場所に保持する必要があることを初めて正しく理解できませんでした。個人的なプロジェクトのために最近やったので、自分自身を修正しようとしました。したがって、より正確な答えは次のとおりです。
http://jsfiddle.net/BaliBalo/7ozrc1cq/

主要部分は次のとおりです (currentLocation がコンテナー内の画像の左上のポイントである場合):

var factor = 1 - newScale / currentScale;
currentLocation.x += (mouseLocation.x - currentLocation.x) * factor;
currentLocation.y += (mouseLocation.y - currentLocation.y) * factor;

CSSトランジションも削除しました。requestAnimationFrameスムーズなスクロールを実現する最善の方法は、アニメーション ループを作成するために使用し、値を関数内で直接変更する代わりに、値zoomを保存し、ループ内でアニメーション化することだと思います。

于 2013-01-21T00:55:06.227 に答える