Angular 4中HammerJS pinch zoom启用及配置方法咨询

嘿，我来帮你搞定Angular 4里用HammerJS实现图片捏合缩放的事儿，包括启用pinch功能的等效写法和所有必要配置~

一、先搞定依赖安装与全局引入 #

首先得确保HammerJS在你的项目里能正常工作：

• 用npm安装依赖：npm install hammerjs --save
• 打开main.ts，在文件顶部导入HammerJS：import 'hammerjs';
  这一步是让Angular能全局识别HammerJS的手势系统。

二、启用Pinch手势的两种方式 #

HammerJS默认关闭pinch，在Angular 4里有两种方式启用它，看你需要全局生效还是仅单个组件生效：

方式1：全局配置（整个应用生效） #

如果你想让所有组件都能使用pinch手势，可以在根模块里自定义Hammer配置：

import { NgModule } from '@angular/core';
import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

// 自定义Hammer手势配置类
export class CustomHammerConfig extends HammerGestureConfig {
  overrides = {
    // 启用pinch手势，还可以在这里配置其他手势的参数
    pinch: { enable: true }
  };
}

@NgModule({
  imports: [BrowserModule],
  providers: [
    // 告诉Angular使用我们自定义的Hammer配置
    { provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
  ]
})
export class AppModule { }

方式2：组件级配置（仅当前组件生效） #

如果只是某个图片组件需要缩放功能，可以直接在组件内创建Hammer实例并启用pinch：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-image-zoom',
  template: '<img #zoomImage src="./assets/your-image.jpg" style="transform-origin: center center;">'
})
export class ImageZoomComponent implements OnInit {
  @ViewChild('zoomImage') zoomImage: ElementRef;
  private currentScale = 1; // 记录当前缩放比例

  ngOnInit() {
    // 给图片元素创建Hammer实例
    const hammertime = new Hammer(this.zoomImage.nativeElement);
    
    // 启用pinch手势，这就是你要找的等效写法啦
    hammertime.get('pinch').set({ enable: true });

    // 监听pinch开始事件，记录当前缩放比例
    hammertime.on('pinchstart', () => {
      const currentTransform = this.zoomImage.nativeElement.style.transform;
      this.currentScale = currentTransform ? parseFloat(currentTransform.replace('scale(', '').replace(')', '')) : 1;
    });

    // 监听pinch事件，实现缩放逻辑
    hammertime.on('pinch', (event) => {
      // 计算新的缩放比例，限制在0.5到3之间（防止缩得太小或太大）
      const newScale = Math.max(0.5, Math.min(3, this.currentScale * event.scale));
      // 应用缩放
      this.zoomImage.nativeElement.style.transform = `scale(${newScale})`;
    });
  }
}

三、关键注意事项 #

• 一定要给图片设置transform-origin: center center;，不然缩放会从左上角开始，体验很差
• event.scale是相对于手势开始时的比例，所以需要用currentScale累积之前的缩放值，不然每次pinch都会重置到初始大小
• 桌面端可以按住Ctrl键+鼠标拖动来模拟捏合手势，方便调试

内容的提问来源于stack exchange，提问作者Palash