react移动端svg等图片拖拽缩放

 

使用es6类的方法实现



/**
 *定义svg，png，jpeg图片移动端缩放功能
 * 
 * 可拖拽，看缩放
    let zoomEl = document.getElementById('zoomEl');
    let zoom = new Zoom({
        el:zoomEl,
        options:{'top': zoomEl.offsetTop+50, 'left': zoomEl.offsetLeft+50, 'width': 400, 'height': 400 }
    });
    zoom.setScale(1)
 * @class Zoom
 */
class Zoom{
    
    /**
     *Creates an instance of Zoom.
     * @param {el,options:{top,left,width,height}} ops 参数配置
     * @memberof Zoom
     */
    constructor(ops){
        //参数配置
        this.ops = Object.assign({
            minScale:1,
            maxScale:3,
            top:50,
            left:50,
        },ops.options)
        //展示的存放容器
        this.el = ops.el;

        this.lastSapce = 0;
        this.touchState = 0;
        this.lastPoint = null;
        this.targetPoint = null;
        //放大缩小的倍数 当前缩放倍数
        this.minScale = this.ops.minScale || 1;
        this.maxScale = this.ops.maxScale || 10;

        // dom 的尺寸参数
        this.width = this.ops.width;
        this.height = this.ops.height;
        this.top = this.ops.top;
        this.left = this.ops.left;
        this.scale = 1;

        // 初始位置以及初始宽高
        this.originTop = this.ops.top;
        this.originLeft = this.ops.left;
        this.originW = this.width;
        this.originH = this.height;
        
        // 图片中心点
        this.centerX = this.left + this.originW/2;
        this.centerY = this.top  + this.originH/2;
        this.el.style.position = "absolute";
        this.init();
    }

    /**
     *初始化数据
     *
     * @memberof Zoom
     */
    init(){
        this.el.addEventListener('touchmove',this.touchmoveHandler);
        this.el.addEventListener('touchstart',this.touchmoveHandler);
        this.el.addEventListener('touchend',this.touchEndHandler);
        this.el.addEventListener('touchcancel',this.touchEndHandler);
        this.el.addEventListener('touchstart',this.dbclickHandler);
        this.el.zoom = this;
    }

    getTouches(event){
        let touches = event.touches;
        if(!touches){
            touches = event.originalEvent.touches;
        }
        return touches;
    }

    getTouchsDistance(t1,t2){
        let dx = parseInt(t1.pageX - t2.pageX);
        let dy = parseInt(t1.pageY - t2.pageY);

        let d = Math.pow((dx*dx+dy+dy),0.8);
        return d.toFixed(5); 
    }

    restView(){
        this.el.style.width = this.width +"px";
        this.el.style.height = this.height +"px";
        this.el.style.top = this.top +"px";
        this.el.style.left = this.left +"px";
    }

    dbclickHandler(event){
        event.stopPropagation();
        event.preventDefault();

        let el = event.currentTarget;
        let zoom = el.zoom;
        let time = new Date(event.timeStamp).getTime();
        let touchs = zoom.getTouches(event);
        if (touchs.length == 1) {
            if (!el.lastClickTime) {
                el.lastClickTime = time;
            }else{
                if (time - el.lastClickTime < 300) {
                    el.lastClickTime = 0;
                    if (zoom.scale != 1) {
                        zoom.setScale(1);
                    }else if(zoom.scale == 1){
                        zoom.setScale(2);
                    }
                }else{
                    el.lastClickTime = time;
                }
            }
        }
        zoom.touchStartTime = new Date().getTime();
        return false;
    }

    drage(touch){
        if (this.lastPoint == null) {
            this.lastPoint = {
                x:touch.pageX,
                y:touch.pageY,
            }
        }else{
            let dx = parseInt(touch.pageX - this.lastPoint.x);
            let dy = parseInt(touch.pageY - this.lastPoint.y);


            this.lastPoint.x = touch.pageX;
            this.lastPoint.y = touch.pageY;

            this.left += dx;
            this.top += dy;

            this.setTransform(false);
        } 
    }

    zoom(touchs){
        this.lastPoint = null;
        let t1 = touchs[0];
        let t2 = touchs[1];

        let x1 = t1.pageX;
        let x2 = t2.pageX;
        let y1 = t1.pageY;
        let y2 = t2.pageY;

        let d = this.getTouchsDistance(t1,t2);

        if (this.touchState == 0) {
            this.lastSapce = d;
            this.touchState = 1;

            this.pointX = (x2 + (x1 - x2) / 2 - this.left)/this.scale;
            this.pointY = (y2 + (y1 - y2) / 2 - this.top)/this.scale;
        }else if(this.touchState == 1){

            let scaleChange = ((d / this.lastSapce) - 1) * 2;

            let scale = this.scale + scaleChange / 2;

            this.setScale(scale,this.pointX,this.pointY);

            this.lastSapce = d;
        }
    }

    touchmoveHandler(event){
        event.stopPropagation();
        event.preventDefault();
        let el = event.currentTarget;
        let zoom = el.zoom;
        let touchs = zoom.getTouches(event);
        if (touchs.length == 1) {
            zoom.drage(touchs[0]);//拖动处理
        }else if (touchs.length >= 2) {
            zoom.lastPoint = null;//终止拖动事件
            zoom.zoom(touchs);//缩放处理

        }
        return false;
    }

    touchEndHandler(event){
        let zoom = event.currentTarget.zoom;

        zoom.touchState = 0;
        zoom.lastPoint = null;
        zoom.lastSapce = 0;

        let minSpace = 20;
        let parentWidth = zoom.el.parentElement.offsetWidth;
        let parentHight =zoom.el.parentElement.offsetHeight;
        let scale = zoom.scale;

        if(scale < zoom.minScale){
            scale = zoom.minScale;
        }
        if(scale > zoom.maxScale){
            scale = zoom.maxScale;
        }

        if(scale != zoom.scale){
            zoom.preSetScale(scale,zoom.lastPointX,zoom.lastPointY);
        }

        if((zoom.left + zoom.width) < minSpace){
                zoom.left = - zoom.width + minSpace;
        }
        if(zoom.left >= (parentWidth - minSpace)){
                zoom.left = parentWidth - minSpace;
        }

        if((zoom.top + zoom.height) < minSpace){
            zoom.top = - zoom.height + minSpace;
        }
        if(zoom.top >= (parentHight - minSpace)){
            zoom.top = parentHight - minSpace;
        }
        zoom.setTransform(true);
        return;  
    }

    setTransform(needAnimation,originX,originY){
        let distanceX = this.left - this.originLeft;
        let distanceY = this.top - this.originTop;
        let scale = this.scale;
        originX = originX == undefined ? (this.originTop + 'px') : originX;
        originY = originY == undefined ? (this.originLeft + 'px') : originY;
        this.el.style.transformOrigin = 'left top';
        this.el.style.transform = 'matrix('+scale+',0,0,'+scale+','+distanceX+','+distanceY+')';
        if(needAnimation == true){
            this.el.style.transition = 'all .3s ease-in-out 0s'
        }else{
            this.el.style.transition = ''
        }
    }

    destroy(){
        this.el.removeEventListener('touchmove',this.touchmoveHandler);
        this.el.removeEventListener('touchstart',this.touchmoveHandler);
        this.el.removeEventListener('touchend',this.touchEndHandler);
        this.el.removeEventListener('touchcancel',this.touchEndHandler);

        this.el.zoom = null;
    }

    setScale(scale,pointX,pointY){
        this.preSetScale(scale,pointX,pointY);
        this.setTransform(false);
    }

    preSetScale(scale,pointX,pointY){
        if (scale < 0.5) {
            scale = 0.5;
        }

        if (pointX ==undefined) {
            this.left = this.centerX - this.originW / 2 - this.originW/2*(scale - 1);
            this.top = this.centerY - this.originH / 2 - this.originH/2*(scale - 1);
            this.width = scale * this.originW;
            this.height = scale * this.originH;
            this.scale = scale;
        }else{
            this.width = scale * this.originW;
            this.height = scale * this.originH;
            this.left = this.left - pointX * (scale - this.scale);
            this.top = this.top - pointY * (scale - this.scale);
            this.lastPointX = pointX;
            this.lastPointY = pointY;
            this.scale = scale;
        }
    }
}
export default Zoom;