图片拖拽、缩放、旋转

转载：https://blog.csdn.net/somethingwhat/article/details/53487668

$('body').on('click', '.imgScale', function() {
    $('body').append('<div class="img-dialog" style="position:fixed;z-index:9999999;width:100%;height:100%;top:0px;left:0px"></div>')
    var bodyW = $('body .img-dialog').width();
    var bodyH = $('body .img-dialog').height();
    var imgW = $(this).width();
    var imgH = $(this).height();
    var imgS_H = bodyW / imgW * imgH;
    var imgS_W = bodyH / imgH * imgW
    if (imgS_H - bodyH >= 0) {
        var html = '<div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;z-index:-1" onclick="closeDia()"></div>' +
            '<span style="background:rgba(255,255,255,0.8);border-radius:50%;display:inline-block;width:25px;height:25px;position:absolute;top:5px;right:5px;z-index:9999;text-align:center;line-height:25px" onclick="closeDia()"><i class="aui-iconfont aui-icon-close" ></i></span>' +
            '<div style="position:relative;width: 100%;height: 100%;overflow: hidden;">' +
            '<img id="targetObj" style="position:relative;height:100%;left:' + (bodyW - imgS_W) / 2 + 'px" src="' + $(this).attr('src') + '" />' +
            '</div>'
        $('body .img-dialog').append(html)
    } else {
        var html = '<div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;z-index:-1" onclick="closeDia()"></div>' +
            '<span style="background:rgba(255,255,255,0.8);border-radius:50%;display:inline-block;width:25px;height:25px;position:absolute;top:5px;right:5px;z-index:9999;text-align:center;line-height:25px" onclick="closeDia()"><i class="aui-iconfont aui-icon-close" ></i></span>' +
            '<div style="position:relative;width: 100%;height: 100%;overflow: hidden;">' +
            '<img id="targetObj" style="position:relative;width:100%;top:' + (bodyH - imgS_H) / 2 + 'px" src="' + $(this).attr('src') + '" />' +
            '</div>'
        $('body .img-dialog').append(html)
           
    }
    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) { });
})

function closeDia() {
    $('.img-dialog').remove()
}

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(); //阻止默认事件
        });
        cat.touchjs.left = 0;
        cat.touchjs.top = 0;
        cat.touchjs.scaleVal = 0
        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 false;
            }
            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);
        });
    }
};

touch.js——手机端的操作手势:https://blog.csdn.net/wangjiaohome/article/details/49364177
touch.js下载：https://download.csdn.net/download/qq_36061522/10772896