25
4

5 に答える 5

21
于 2012-05-31T05:59:42.593 に答える
7

そのスニペットを使用して、hammerと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;
    });

}
于 2013-05-10T22:00:21.963 に答える
2

動作している唯一のプラグイン/ライブラリ（ http://cubiq.org/iscroll-4）に出くわすまで、私はインターネット全体、そしてアウターネットを調べました。 

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

ここで、wrapperはid="wrapper"のようにIDです。

<div id="wrapper">
    <img src="smth.jpg" />
</div>
于 2013-07-02T15:03:44.543 に答える
2

本当の答えではありませんが、それをすべて行うプラグインへのリンクです。すごい仕事！

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

（ありがとう'Timmywil'、誰でも-あなたは誰でも）

于 2014-09-01T13:34:12.603 に答える
0

これは私が数年前に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レイアウトでは完全に機能するはずです。

于 2013-11-10T10:21:02.267 に答える