Scaling
var initialscale = 1;
var currentscale = 1;
Touch.on (' #target ', ' pinch ', function (EV) {
Currentscale = ev.scale-1;
Currentscale = Initialscale + Currentscale;
Currentscale = currentscale > 1.5? 1.5:currentscale;
Currentscale = Currentscale < 0.5? 0.5:currentscale;
This.style.webkitTransform = ' scale (' + Currentscale + ') ' + ' + ' rotate (' + totalangle + ' deg) ';
This.style.webkitTransition = ' all ease 0.05s ';
});
Rotating
var angle = 0;
var totalangle = 0;
Touch.on (' #target ', ' rotate ', function (EV) {
Totalangle = angle + ev.rotation;
if (ev.fingerstatus = = = ' End ') {
Angle = angle + ev.rotation;
}
This.style.webkitTransform = ' rotate (' + totalangle + ' deg) ' + ' + ' scale (' + Currentscale + ') ';
});
//Drag, the second is true is the background graph drag
var Fbinddrag = function (obj, outmove) {
var obj = $ (obj);
var pt = obj.parent ();
var xy = null; Obj.xy ();
Touch.on (obj[0], ' Touchstart ', function (EV) {
if (true) {xy = {x:obj[0].offsetleft, y:obj[0].offsettop}}
Ev.preventdefault ();
});
var dx, dy;
Touch.on (obj[0], ' drag ', function (EV) {
DX = DX | | 0;
dy = Dy | | 0;
var offx = dx + ev.x;
var offy = dy + ev.y;
var nx = xy.x + offx, NY = xy.y + offy;
if (outmove) {
if (NX > 0) {
NX = 0;
}
if (NX + Obj[0].offsetwidth < Pt[0].clientwidth) {
NX = Pt[0].clientwidth-obj[0].offsetwidth;
}
if (NY > 0) {ny = 0;}
if (NY + obj[0].offsetheight < pt[0].clientheight) {
NY = pt[0].clientheight-obj[0].offsetheight;
}
} else {
if (NX < 0) {
NX = 0;
}
if (NX + Obj[0].offsetwidth > Pt[0].clientwidth) {
NX = Pt[0].clientwidth-obj[0].offsetwidth;
}
if (NY < 0) {NY = 0;}
if (NY + obj[0].offsetheight > Pt[0].clientheight) {
NY = pt[0].clientheight-obj[0].offsetheight+32;
}
}
Obj.css ("left", NX + "px");
Obj.css ("Top", NY + "px");
});
Touch.on (obj[0], ' dragend ', function (EV) {
DX + = ev.x;
DY + = ev.y;
});
}
Background map Zoom, uploadimg as background frame
var fscale = function (obj) {
var obj = $ (obj);
var target = obj[0];
var pt = obj.parent ();
Target.style.webkitTransition = ' all ease 0.05s ';
var ox, Oy, ow, OH;
Touch.on ($ ("#uploadImg") [0], ' touchstart ', function (EV) {
Ox = Target.offsetleft;
Oy = Target.offsettop;
ow = Target.clientwidth;
Oh = target.clientheight;
Ev.preventdefault ();
});
var initialscale = 1;
var Currentscale;
Touch.on ($ ("#uploadImg") [0], ' pinch ', function (EV) {
Currentscale = ev.scale-1;
var mw = target.clientwidth;
var mh = target.clientheight;
var xywh = {x:0, y:0, w:0, h:0};
XYWH.W = ow * Ev.scale;
if (XYWH.W < pt[0].clientwidth) {
XYWH.W = Pt[0].clientwidth;
}
XYWH.H = XYWH.W * MH * 1.0/MW;
if (Xywh < pt[0].clientheight) {
XYWH.H = Pt[0].clientheight;
XYWH.W = xywh.h * MW/MH;
}
xywh.x = Ox-(xywh.w-ow)/2;
Xywh.y = Oy-(XYWH.H-OH)/2;
if (xywh.x > 0) {xywh.x = 0;}
if (Xywh.y > 0) {xywh.y = 0;}
if (xywh.x + target.offsetwidth < pt[0].clientwidth) {
xywh.x = 0;
}
if (Xywh.y + target.offsetheight < pt[0].clientheight) {
XYWH.Y = 0;
}
index = 0;
Obj.css ({left:xywh.x + ' px ', top:xywh.y + ' px ', WIDTH:XYWH.W + ' px ');
});
Touch.on ($ ("#uploadImg") [0], ' pinchend ', function (EV) {
});
}
Mobile Zoom rotation compatible touch for mobile phone-side images