スケールすべての

Question

ファーストを中心に翻訳地点からの画像は、ここに私の質問のためのフィドルは次のとおりです。

https://jsfiddle.net/0u74faz6/1/

基本的に私は別の容器内で、自身にあるコンテナ内のイメージを持っています。画像を拡大した後、スライダを使用して親コンテナに収まらない場合があります。私は、イメージをパンするためにCSS翻訳を使用しています。これは、translateXとtranslateYという2つの変数を設定します（makeImageDraggableメソッドを参照）。特定の場所にパンした後、私はできるようになります：

この時点から拡大しています。 そして、拡大縮小中は、この点から中心にズームアウトします

Windowsフォトビューアはまさにこれを行います。例としてフィドルで写真を使用すると、イメージを拡大縮小し、それは髪を拡大する。ズームアウトすると、divのイメージの中央に位置を維持しながら、髪の毛から中心に向かって開始します。

私はこのために使用しているメインコードは、ここでは、メソッドのscaleImageである：

translateX = translateX/scale, translateY = translateY/scale; 
    img.style.transform = 'scale3d(' + currentScale + ',' + currentScale + ', 1) ' + 'rotate(' + (currentRotation -90) + 'deg)'; 
    parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'; 

誰も助けることができますか？

Answer 1

これは私が思いついたものです。これは完璧ではないが、容​​器に

https://jsfiddle.net/daibatzu/0u74faz6/6/

の画像をフィッティングしながら、それは、それが最上位であるか否かをユーザが画像を変換された領域の中点とチェックを算出患部からスケールを行いy軸の下端または中央、またはx軸の左中央右端に配置します。次に、これを使用して、親divをどの領域から移動するかを決定します。いずれにしても、フィドルはより良く説明します。

// set transformOrigin and translate parent div 
    parent.style.transformOrigin = transformOriginX + 'px ' + transformOriginY + 'px'; 
    parent.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)'; 

Answer 2

transform-originで作業しましたか？