web-dev-qa-db-ja.com

CSS3でピンチしてズーム

Googleマップとまったく同じように、ピンチツーズームのジェスチャーを実装しようとしています。スティーブンウッズによる講演を見ました- "レスポンシブHTML5タッチインターフェイスの作成" -問題について説明し、上記の手法を使用しました。アイデアは、ターゲット要素の変換Originを（0、0）そして、変換のポイントで拡大縮小してから、画像を平行移動して、変換のポイントを中心に保ちます。

私のテストでは、スケーリングはうまく機能しています。画像は、後続の翻訳間でズームインおよびズームアウトします。問題は、変換値を適切に計算していないことです。タッチイベントにjQueryとHammer.jsを使用しています。変換コールバックで計算を調整して、画像が変換の中心にとどまるようにするにはどうすればよいですか？

CoffeeScript（#test-resizeは背景画像付きのdivです）

image = $('#test-resize')

hammer = image.hammer ->
  prevent_default: true
  scale_treshold: 0

width = image.width()
height = image.height()
toX = 0
toY = 0
translateX = 0
translateY = 0
prevScale = 1
scale = 1

hammer.bind 'transformstart', (event) ->

  toX = (event.touches[0].x + event.touches[0].x) / 2
  toY = (event.touches[1].y + event.touches[1].y) / 2

hammer.bind 'transform', (event) ->

  scale = prevScale * event.scale
  shiftX = toX * ((image.width() * scale) - width) / (image.width() * scale)
  shiftY = toY * ((image.height() * scale) - height) / (image.height() * scale)
  width = image.width() * scale
  height = image.height() * scale

  translateX -= shiftX
  translateY -= shiftY

  css = 'translateX(' + @translateX + 'px) translateY(' + @translateY + 'px) scale(' + scale + ')'
  image.css '-webkit-transform', css
  image.css '-webkit-transform-Origin', '0 0'

hammer.bind 'transformend', () ->
  prevScale = scale
javascriptjquerycss3touchcoffeescript
24
Maros Hluska

私はそれを機能させることができた。

jsFiddleデモ

JsFiddleデモでは、画像をクリックすると、クリックポイントを中心としたピンチジェスチャが表されます。後続のクリックは、一定量だけスケール係数を増加させます。これを便利にするには、変換イベントでスケールを作成し、計算をより頻繁に変換します（hammer.jsが提供します）。

それを機能させるための鍵は、画像に対するスケール座標のポイントを正しく計算することでした。 event.clientX/Yを使用して、画面座標を取得しました。次の行は、画面から画像座標に変換します。

x -= offset.left + newX
y -= offset.top + newY

次に、画像の新しいサイズを計算し、平行移動する距離を見つけます。変換式は Stephen Woodsの講演 から取得されます。

newWidth = image.width() * scale
newHeight = image.height() * scale

newX += -x * (newWidth - image.width) / newWidth
newY += -y * (newHeight - image.height) / newHeight

最後に、スケーリングと翻訳を行います

image.css '-webkit-transform', "scale3d(#{scale}, #{scale}, 1)"         
wrap.css '-webkit-transform', "translate3d(#{newX}px, #{newY}px, 0)"

Translate-Originが画像の左上にとどまるように、すべての翻訳をラッパー要素で行います。

19
Maros Hluska

ハンマーとjqueryを使用して、このスニペットを使用してphonegapの画像のサイズを変更することに成功しました。

誰かに興味があれば、これをJSに翻訳しました。

function attachPinch(wrapperID,imgID)
{
    var image = $(imgID);
    var wrap = $(wrapperID);

    var  width = image.width();
    var  height = image.height();
    var  newX = 0;
    var  newY = 0;
    var  offset = wrap.offset();

    $(imgID).hammer().on("pinch", function(event) {
        var photo = $(this);

        newWidth = photo.width() * event.gesture.scale;
        newHeight = photo.height() * event.gesture.scale;

        // Convert from screen to image coordinates
        var x;
        var y;
        x -= offset.left + newX;
        y -= offset.top + newY;

        newX += -x * (newWidth - width) / newWidth;
        newY += -y * (newHeight - height) / newHeight;

        photo.css('-webkit-transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");      
        wrap.css('-webkit-transform', "translate3d("+newX+"px, "+newY+"px, 0)");

        width = newWidth;
        height = newHeight;
    });

}
6
Raphael Toselli

動作する唯一のプラグイン/ライブラリに出会うまで、私はすべてのインターネット、およびアウターネットを探しました- http://cubiq.org/iscroll-4

var myScroll;
myScroll = new iScroll('wrapper');

wrapperはid = "wrapper"のようなidです

<div id="wrapper">
    <img src="smth.jpg" />
</div>
2
Andrei Cristian Prodan

本当の答えではなく、すべてをあなたのために行うプラグインへのリンクです。すごい仕事！

https://github.com/timmywil/jquery.panzoom

（あなたが誰であれ、「ティミーウィル」に感謝します）

0
Ideogram

これは、数年前にJavaで書いたもので、最近JavaScriptに変換されたものです。

_function View()
{
 this.pos = {x:0,y:0};
 this.Z = 0;
 this.zoom = 1;
 this.scale = 1.1;
 this.Zoom = function(delta,x,y)
 {
  var X = x-this.pos.x;
  var Y = y-this.pos.y;
  var scale = this.scale;
  if(delta>0) this.Z++;
  else
  {
   this.Z--;
   scale = 1/scale;
  }
  this.zoom = Math.pow(this.scale, this.Z);
  this.pos.x+=X-scale*X;
  this.pos.y+=Y-scale*Y;
 }
}
_

this.Zoom = function(delta,x,y)は以下を取ります：

  • delta =ズームインまたはズームアウト
  • x =ズーム原点のx位置
  • y =ズーム原点のy位置

小さな例：

_<script>
var view = new View();
var DivStyle = {x:-123,y:-423,w:300,h:200};
function OnMouseWheel(event)
{
 event.preventDefault();
 view.Zoom(event.wheelDelta,event.clientX,event.clientY);
 div.style.left = (DivStyle.x*view.zoom+view.pos.x)+"px";
 div.style.top = (DivStyle.y*view.zoom+view.pos.y)+"px";
 div.style.width = (DivStyle.w*view.zoom)+"px";
 div.style.height = (DivStyle.h*view.zoom)+"px";
}
function OnMouseMove(event)
{
 view.pos = {x:event.clientX,y:event.clientY};
 div.style.left = (DivStyle.x*view.zoom+view.pos.x)+"px";
 div.style.top = (DivStyle.y*view.zoom+view.pos.y)+"px";
 div.style.width = (DivStyle.w*view.zoom)+"px";
 div.style.height = (DivStyle.h*view.zoom)+"px";
}
</script>
<body onmousewheel="OnMouseWheel(event)" onmousemove="OnMouseMove(event)">
<div id="div" style="position:absolute;left:-123px;top:-423px;width:300px;height:200px;border:1px solid;"></div>
</body>
_

これは、キャンバスとグラフィックスで使用されることを意図して作成されましたが、通常のHTMLレイアウトには完全に機能するはずです。

0
Isaac