手机端 图片的移动缩放旋转兼容touch

Posted 2020-08-08 爱博客

//缩放
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‘;

});

//旋转
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 + ‘)‘;
});

//拖拽,第二个为true是背景图拖拽
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;
});
}

//背景图缩放，uploadImg为背景框

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) {

});
}