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

最新推荐文章于 2023-08-04 16:41:59 发布

敏小静

最新推荐文章于 2023-08-04 16:41:59 发布

阅读量1k

点赞数 1

分类专栏： angular ionic native & angular 文章标签： angular js 手势识别

本文链接：https://blog.youkuaiyun.com/qq_31392495/article/details/114143179

版权

博客介绍了在基于Angular的项目中引入HammerJS进行手势操作的方法。先通过npm install hammerjs下载，再在main.ts引入，接着在app.module.ts配置手势。还将操作封装成指令，引用时引入指令并在标签添加appDoubleGesture属性，同时给出参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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.

最低0.47元/天解锁文章