用于缩放的 Hammerjs 配置 Angular

Question

我将 HammerJS 与 Angular 4 应用程序一起使用，用于缩放图像。在 hammerJS 文档中提到，默认情况下捏合缩放设置为关闭，打开它的代码是

hammertime.get('pinch').set({ enable: true });

任何人都可以帮助我什么是 angular 4 等同于此以及在 angular 4 中使用 hammer pinch zoom 所需的其他配置是什么？

Answer 1

你的问题很含糊。正如所问，以下很可能是您要查找的内容：

您首先需要在项目中执行 npm install 以引入 hammerjs 库：npm install --save hammerjs

然后在您的 view/component 中，您需要获取对您有兴趣使用 hammer.js 监听事件的元素的引用。

下面是一个示例，说明如何对 cli 生成的默认项目进行少量修改。

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img #img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

app.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('img') imgElement: ElementRef;
  title = 'app';

  ngAfterViewInit(): void {
    const hammer = new Hammer(this.imgElement.nativeElement);
    // hammer.on('press', function(e) {
    //   e.target.classList.toggle('expand');
    //   console.log('You\'re pressing me!');
    //   console.log(e);
    // });

    hammer.get('pinch').set({ enable: true });
  }
}

GitHub 上的完整答案代码。

用于缩放的 Hammerjs 配置 Angular

Hammerjs configuration for pinch zoom in Angular

hammer.js

angular