hammerjs移动端手势放大或移动图片

基于angular的项目引入hammerjs手势操作。
1、首先下载npm install hammerjs
2、在main.ts引入import ‘hammerjs’;
3、在app.module.ts对手势进行配置；

 import {HammerGestureConfig, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 
 export class MyHammerConfig extends HammerGestureConfig {
    overrides: any = {
        // override hammerjs default configuration
        'pan': {threshold: 5},
        'swipe': {
            velocity: 0.4,
            threshold: 20,
            direction: 31
        },
        'press': {}
    };
}


	@NgModule({
		providers:[
		 {
	            provide: HAMMER_GESTURE_CONFIG,
	            useClass: MyHammerConfig
	        }
		]
	})

下面进入正题：我是把这个操作封装成指令了，引用的时候引入这个指令，然后在标签添加appDoubleGesture属性

import {Directive, Input, ElementRef, Renderer2} from '@angular/core';
import {DomController} from "@ionic/angular";


@Directive({
  selector: '[appDoubleGesture]'
})
export class DoubleGestureDirective {
  tMatrix:Array<number> = [1,0,0,1,0,0]; //x缩放，无，无，y缩放，x平移，y平移
  initScale: number = 1;//初始化scale
  el:any;
  ticking:boolean = false;
  poscenter:any;
  duration:string='';//设置过渡效果，用于双击缩放效果
  lastTranslate:any;
  lastcenter:any;
  center:any;
  reqAnimationFrame:Function;
  constructor(public element: ElementRef, public renderer: Renderer2, public domCtrl: DomController) {
  }

  
  ngAfterViewInit() {
    let mc = new window['Hammer'](this.element.nativeElement);
    this.el =  this.element.nativeElement;//获取元素
    this.poscenter = this.point2D(0,0);//缓存双指的中心坐标
    this.lastTranslate = this.point2D(0,0);//记录上次的偏移值
    this.lastcenter= this.point2D(this.el.offsetWidth/2,this.el.offsetHeight/2)//图像的中心点，用于对比双指中心点
    this.center = this.lastcenter;
    mc.get('pan').set({ threshold: 0, pointers: 1 });//平移
    mc.get('pinch').set({ threshold: 0,enable: true});//捏放，默认禁止，所以要开启enable：true
    mc.get('tap').set({ event: 'doubletap', taps: 2 });//点击
    mc.on("panmove", this.onPan.bind(this));
    mc.on("panstart",this.onPanStart.bind(this))
    mc.on("pinchmove", this.onPinch.bind(this));
    mc.on("pinchstart",this.onPinchStart.bind(this));
    mc.on("doubletap",this.onDoubleTap.bind(this));//双击放大
    this.reqAnimationFrame = (function() {
      return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();
    this.requestElementUpdate();
  }

 

  point2D(x,y){
    return {x : x,y : y};
  }

  onPanStart(ev){
    this.lastTranslate = this.point2D(this.tMatrix[4],this.tMatrix[5])//缓存上一次的偏移值
  }
  onPan(ev){	
      this.duration = ''
      this.el.className = ''			
      this.tMatrix[4] = this.lastTranslate.x + ev.deltaX
      this.tMatrix[5] = this.lastTranslate.y + ev.deltaY
      this.requestElementUpdate('onpan');
    
  }
  onPinchStart(ev){
    this.duration = '';
    this.lastTranslate = this.point2D(this.tMatrix[4],this.tMatrix[5])//记录上一次的偏移值
    this.initScale = this.tMatrix[0] || 1;
    this.poscenter = this.point2D(ev.center.x, ev.center.y)
    
    this.lastcenter = this.point2D(this.center.x + this.lastTranslate.x,this.center.y + this.lastTranslate.y)//重新计算放大后的中心坐标
    this.poscenter =  this.point2D(ev.center.x -  this.lastcenter.x, ev.center.y- this.lastcenter.y)
    // console.log("center", this.lastcenter.x, this.lastcenter.y)
    
    this.requestElementUpdate('onpinchStart');
  }
  onPinch(ev){
    console.log(ev.scale);
    var nowScale =  this.tMatrix[0] =  this.tMatrix[3] =  this.initScale * ev.scale;
    var composscal = (1 - ev.scale) 
    //tMatrix[4] = poscenter.x - ((poscenter.x - lastcenter.x) *  ev.scale + lastcenter.x)  + lastTranslate.x//最后加上上一次的偏移值
    //tMatrix[5] = poscenter.y - ((poscenter.y - lastcenter.y) *  ev.scale + lastcenter.y)  + lastTranslate.y
    this.tMatrix[4] = (1 - ev.scale) *  this.poscenter.x +  this.lastTranslate.x
    this.tMatrix[5] = (1 - ev.scale) *  this.poscenter.y +  this.lastTranslate.y
    this.requestElementUpdate('onpinch');	
  }
  
  onDoubleTap(ev){
    this.duration = ".3s ease all";
    var nowScale =  this.tMatrix[0];
    if(nowScale != 1 ||  this.tMatrix[4]!= 0){
      //scale不等于1，要重回1
      this.tMatrix[0] =  this.tMatrix[3] = 1;
      this.tMatrix[4] =  this.tMatrix[5] = 0;
    }else{
      var pointer = ev.center
      var scale = 2
      this.tMatrix[0] =  this.tMatrix[3] = scale
      //var last = point2D
      //tMatrix[4] = pointer.x - ((pointer.x-lastcenter.x) * scale + lastcenter.x);
      //tMatrix[5] = pointer.y - ((pointer.y-lastcenter.y) * scale + lastcenter.y);
      this. tMatrix[4] = (1 - scale) * ( pointer.x -  this.center.x) 
      this.tMatrix[5] = (1 - scale) * ( pointer.y -  this.center.y)
    }
    this.requestElementUpdate('doubleTap');
  }
  
  updateElementTransform() {
    this.el.style.transition =  this.duration;
    var tmp =  this.tMatrix.join(',')
    // console.log(tmp)
    this.el.style.transform = 'matrix(' + tmp + ')';
    this.ticking = false;
  }
  
  requestElementUpdate(arg?:string) {
    // arg && console.log(arg)
  
      if(! this.ticking) {
        this.reqAnimationFrame( this.updateElementTransform.bind(this));//改变this的指向
        this.ticking = true;
      }
  }
}

可参考：https://blog.csdn.net/qq_29729735/article/details/88578949