Touch.js 手勢庫 拖動 縮放和 旋轉！！！
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Touch</title>
</head>
<body>
<div id="container"></div><div style="position:relative;width: 100%;height: 750px;overflow: hidden;border: 1px solid #aaa;">
<img id="targetObj" style="position:relative;transform-origin:center" src="1.jpg" />
</div>
</body>
<script src="js/jquery_3.3.1.js"></script>
<script src="js/touch.js"></script>
<script>
var cat = window.cat || {};
cat.touchjs = {
left: 0,
top: 0,
scaleVal: 1, //縮放
rotateVal: 0, //旋轉
curStatus: 0, //記錄當前手勢的狀態, 0:拖動, 1:縮放, 2:旋轉
//初始化
init: function ($targetObj, callback) {
touch.on($targetObj, 'touchstart', function (ev) {
cat.touchjs.curStatus = 0;
ev.preventDefault();//阻止預設事件
});
if (!window.localStorage.cat_touchjs_data)
callback(0, 0, 1, 0);
else {
var jsonObj = JSON.parse(window.localStorage.cat_touchjs_data);
cat.touchjs.left = parseFloat(jsonObj.left), cat.touchjs.top = parseFloat(jsonObj.top), cat.touchjs.scaleVal = parseFloat(jsonObj.scale), cat.touchjs.rotateVal = parseFloat(jsonObj.rotate);
callback(cat.touchjs.left, cat.touchjs.top, cat.touchjs.scaleVal, cat.touchjs.rotateVal);
}
},
//拖動
drag: function ($targetObj, callback) {
touch.on($targetObj, 'drag', function (ev) {
$targetObj.css("left", cat.touchjs.left + ev.x).css("top", cat.touchjs.top + ev.y);
});
touch.on($targetObj, 'dragend', function (ev) {
cat.touchjs.left = cat.touchjs.left + ev.x;
cat.touchjs.top = cat.touchjs.top + ev.y;
callback(cat.touchjs.left, cat.touchjs.top);
});
},
//縮放
scale: function ($targetObj, callback) {
var initialScale = cat.touchjs.scaleVal || 1;
var currentScale;
touch.on($targetObj, 'pinch', function (ev) {
if (cat.touchjs.curStatus == 2) {
return;
}
cat.touchjs.curStatus = 1;
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
cat.touchjs.scaleVal = currentScale;
var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
$targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);
callback(cat.touchjs.scaleVal);
});
touch.on($targetObj, 'pinchend', function (ev) {
if (cat.touchjs.curStatus == 2) {
return;
}
initialScale = currentScale;
cat.touchjs.scaleVal = currentScale;
callback(cat.touchjs.scaleVal);
});
},
//旋轉
rotate: function ($targetObj, callback) {
var angle = cat.touchjs.rotateVal || 0;
touch.on($targetObj, 'rotate', function (ev) {
if (cat.touchjs.curStatus == 1) {
return;
}
cat.touchjs.curStatus = 2;
var totalAngle = angle + ev.rotation;
if (ev.fingerStatus === 'end') {
angle = angle + ev.rotation;
}
cat.touchjs.rotateVal = totalAngle;
var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
$targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);
$targetObj.attr('data-rotate', cat.touchjs.rotateVal);
callback(cat.touchjs.rotateVal);
});
}
};
var $targetObj = $('#targetObj');
//初始化設定
cat.touchjs.init($targetObj, function (left, top, scale, rotate) {});
//初始化拖動手勢（不需要就註釋掉）
cat.touchjs.drag($targetObj, function (left, top) { });
//初始化縮放手勢（不需要就註釋掉）
cat.touchjs.scale($targetObj, function (scale) { });
//初始化旋轉手勢（不需要就註釋掉）
cat.touchjs.rotate($targetObj, function (rotate) { });
</script>
</html>
上述屬於網上找到的旋轉縮放拖動的touch.js使用方法，
注意：在自己專案使用的時候定位的元素 只能新增 top 和 left 因為touch操作的就是元素的left和top 如果新增right和bottom在touch操作元素的時候只新增和覆蓋left和top而 right和bottom不變 那麼拖動縮放等真實效果可想而知了。
還有在真實專案中可拖動元素的位置不一定都是0.0座標開始的 這個需要根據元素的真實left 和 top 的px值來更改方法cat.touchjs裡面的left 和 top值。