<script src="path/noname-gesture.js"></script>

<div id="box"></div>
const divDom = document.getElementById('box');
const gesture = new NonameGesture(divDom, {
    pointerdown: function (e) { },
    pointermove: function (e) { },
    pointerup: function (e) { },
    pointercancel: function (e) { },
    wheel: function (e) { },
    tap: function (e) { },
    singleTap: function (e) { },
    longTap: function (e) { },
    doubleTap: function (e) { },
    drag: function (e) { },
    swipe: function (e) { },
    rotate: function (e) { },
    pinch: function (e) { }
});

// 双指旋转
<img id="rotateImage" alt="">
const rotateImage = document.getElementById('rotateImage');
let result, x = 0, y = 0, rotate = 0;
// 图片加载成功后再绑定事件
rotateImage.addEventListener('load', function () {
    const rotateGesture = new NonameGesture(rotateImage, {
        rotate: function (e) {
            // transform-origin相对于视口左上角的坐标
            const origin = {
                x: result.width * 0.5 + x,
                y: result.height * 0.5 + y
            };
            // 计算点图片变换中心绕双指中心旋转e._rotate度后的坐标，设为点a
            const a = {
                x: (origin.x - e._centerX) * Math.cos(e._rotate * Math.PI / 180) - (origin.y - e._centerY) * Math.sin(e._rotate * Math.PI / 180) + e._centerX,
                y: (origin.x - e._centerX) * Math.sin(e._rotate * Math.PI / 180) + (origin.y - e._centerY) * Math.cos(e._rotate * Math.PI / 180) + e._centerY
            }
            // 计算偏移量
            x -= origin.x - a.x;
            y -= origin.y - a.y;
            // 旋转角度
            rotate = (rotate + e._rotate + 360) % 360;
            rotateImage.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px) rotate(' + rotate + 'deg)';
        }
    });
    result = rotateGesture.getImgSize(rotateImage.naturalWidth, rotateImage.naturalHeight, window.innerWidth, window.innerHeight);
    rotateImage.style.width = result.width + 'px';
    rotateImage.style.height = result.height + 'px';
    rotateImage.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px) rotate(' + rotate + 'deg)';
});
// 图片赋值需放在load回调之后，因为图片缓存后读取很快，有可能不执行load回调
rotateImage.src = 'xxx.jpg';

// 双指缩放
<img id="pinchImage" src="xxx.png" alt="">
const pinchImage = document.getElementById('pinchImage');
let result, x = 0, y = 0, scale = 1;
pinchImage.addEventListener('load', function () {
    const pinchGesture = new NonameGesture(pinchImage, {
        pinch: function (e) {
            scale *= e._scale;
            const origin = {
                x: (e._scale - 1) * result.width * 0.5,
                y: (e._scale - 1) * result.height * 0.5
            };
            // 以双指中心为缩放原点计算偏移量
            x -= (e._scale - 1) * (e._centerX - x) - origin.x - (e._centerX - e._lastCenterX);
            y -= (e._scale - 1) * (e._centerY - x) - origin.y - (e._centerY - e._lastCenterY);
            pinchImage.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')';
        }
    });
    result = pinchGesture.getImgSize(pinchImage.naturalWidth, pinchImage.naturalHeight, window.innerWidth, window.innerHeight);
    pinchImage.style.width = result.width + 'px';
    pinchImage.style.height = result.height + 'px';
    pinchImage.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')';
});
pinchImage.src = 'xxx.jpg';