转载：图片拖动、缩放、旋转 （鼠标手势）

原文转载自touch.js 拖动、缩放、旋转 （鼠标手势）该作者个人网站Somethingwhat（有一些开源demo，感觉有的用的上，记录一下，以防丢失）

先上预览地址：

https://www.somethingwhat.com/Project/Detail?id=f092710d3f7255b4

看下是不是你要的效果，不是就不用往下看了。

示例中我用了touch.js这个插件（百度团队开发的，但好像已经停止更新了），再自己封装了一下，可以实现手势操作：拖动、缩放、旋转。

封装好的脚本方法是这样的：

[javascript]  view plain  copy

1. /* 
2. * author: www.somethingwhat.com 
3. */  
4. var cat = window.cat || {};  
5. cat.touchjs = {  
6.     left: 0,  
7.     top: 0,  
8.     scaleVal: 1,    //缩放  
9.     rotateVal: 0,   //旋转  
10.     curStatus: 0,   //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转  
11.     //初始化  
12.     init: function ($targetObj, callback) {  
13.         touch.on($targetObj, 'touchstart', function (ev) {  
14.             cat.touchjs.curStatus = 0;  
15.             ev.preventDefault();//阻止默认事件  
16.         });  
17.         if (!window.localStorage.cat_touchjs_data)  
18.             callback(0, 0, 1, 0);  
19.         else {  
20.             var jsonObj = JSON.parse(window.localStorage.cat_touchjs_data);  
21.             cat.touchjs.left = parseFloat(jsonObj.left), cat.touchjs.top = parseFloat(jsonObj.top), cat.touchjs.scaleVal = parseFloat(jsonObj.scale), cat.touchjs.rotateVal = parseFloat(jsonObj.rotate);  
22.             callback(cat.touchjs.left, cat.touchjs.top, cat.touchjs.scaleVal, cat.touchjs.rotateVal);  
23.         }  
24.     },  
25.     //拖动  
26.     drag: function ($targetObj, callback) {  
27.         touch.on($targetObj, 'drag', function (ev) {  
28.             $targetObj.css("left", cat.touchjs.left + ev.x).css("top", cat.touchjs.top + ev.y);  
29.         });  
30.         touch.on($targetObj, 'dragend', function (ev) {  
31.             cat.touchjs.left = cat.touchjs.left + ev.x;  
32.             cat.touchjs.top = cat.touchjs.top + ev.y;  
33.             callback(cat.touchjs.left, cat.touchjs.top);  
34.         });  
35.     },  
36.     //缩放  
37.     scale: function ($targetObj, callback) {  
38.         var initialScale = cat.touchjs.scaleVal || 1;  
39.         var currentScale;  
40.         touch.on($targetObj, 'pinch', function (ev) {  
41.             if (cat.touchjs.curStatus == 2) {  
42.                 return;  
43.             }  
44.             cat.touchjs.curStatus = 1;  
45.             currentScale = ev.scale - 1;  
46.             currentScale = initialScale + currentScale;  
47.             cat.touchjs.scaleVal = currentScale;  
48.             var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';  
49.             $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);  
50.             callback(cat.touchjs.scaleVal);  
51.         });  
52.   
53.         touch.on($targetObj, 'pinchend', function (ev) {  
54.             if (cat.touchjs.curStatus == 2) {  
55.                 return;  
56.             }  
57.             initialScale = currentScale;  
58.             cat.touchjs.scaleVal = currentScale;  
59.             callback(cat.touchjs.scaleVal);  
60.         });  
61.     },  
62.     //旋转  
63.     rotate: function ($targetObj, callback) {  
64.         var angle = cat.touchjs.rotateVal || 0;  
65.         touch.on($targetObj, 'rotate', function (ev) {  
66.             if (cat.touchjs.curStatus == 1) {  
67.                 return;  
68.             }  
69.             cat.touchjs.curStatus = 2;  
70.             var totalAngle = angle + ev.rotation;  
71.             if (ev.fingerStatus === 'end') {  
72.                 angle = angle + ev.rotation;  
73.             }  
74.             cat.touchjs.rotateVal = totalAngle;  
75.             var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';  
76.             $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);  
77.             $targetObj.attr('data-rotate', cat.touchjs.rotateVal);  
78.             callback(cat.touchjs.rotateVal);  
79.         });  
80.     }  
81. };  

调用起来很简单：

html：

[html]  view plain  copy

1. <div style="position:relative;width: 100%;height: 250px;overflow: hidden;border: 1px dashed #ff0000;">  
2.   <img id="targetObj" style="position:relative;transform-origin:center" src="http://demo.somethingwhat.com/images/flower1.jpg" />  
3. </div>  

js：

[javascript]  view plain  copy

1. var $targetObj = $('#targetObj');  
2. //初始化设置  
3. cat.touchjs.init($targetObj, function (left, top, scale, rotate) {};  
4. //初始化拖动手势（不需要就注释掉）  
5. cat.touchjs.drag($targetObj, function (left, top) { });  
6. //初始化缩放手势（不需要就注释掉）  
7. cat.touchjs.scale($targetObj, function (scale) { });  
8. //初始化旋转手势（不需要就注释掉）  
9. cat.touchjs.rotate($targetObj, function (rotate) { });  

在线预览、下载全在这里：

https://www.somethingwhat.com/Project/Detail?id=f092710d3f7255b4