Question

我正在使用带有Angular 4应用程序的HammerJS来缩放图像。在hammerJS doc中，默认提到pinch zoom设置为off，打开它的代码是

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

任何人都可以帮助我，角度4等于此角度4，使用角度4的锤子捏缩放所需的其他配置是什么？

Answer 1

你的问题很模糊。如上所述，以下内容很可能是您正在寻找的内容：

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

然后在您的视图/组件中，您需要获得对您有兴趣使用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中的捏缩放

1 个答案: