如何在离子手势 API 中获取旋转角度？

Question

我正在画布上工作，并且正在使用hammerjs 处理手势事件。但是我遇到了一个问题，我已经问过here 和其他地方但没有人回应。所以现在我正在使用离子手势，但我也找不到旋转角度属性。有人可以帮我吗？

代码如下：

ngAfterViewInit() {
      const gesture: Gesture = this.gestureCtrl.create({
      el: this.transCanvasElement,
      gestureName: 'rotate',
      onStart: ev => this.onStartHandler(ev)
    }, true);
    gesture.enable();
}
onStartHandler(ev) {
    console.log('ionic gesture ev angle: ', ev.rotation); // ev.rotation is undefined
}

Answer 1

this 在 JS 中的含义取决于作用域。有关更多信息，请参阅here。您可以将this 绑定到回调或使其成为箭头函数。

试试下面的

选项1：绑定this

ngAfterViewInit() {
  const gesture: Gesture = this.gestureCtrl.create({
    el: this.transCanvasElement,
    gestureName: 'rotate',
    onStart: this.onStartHandler.bind(this)  // <-- bind `this` to the callback
  }, true);
  gesture.enable();
}

onStartHandler(ev) {
  console.log('ionic gesture ev angle: ', ev.rotation);
}

选项2：箭头函数

ngAfterViewInit() {
  const gesture: Gesture = this.gestureCtrl.create({
    el: this.transCanvasElement,
    gestureName: 'rotate',
    onStart: ev => this.onStartHandler(ev)
  }, true);
  gesture.enable();
}

onStartHandler = (ev) => {                           // <-- arrow function
  console.log('ionic gesture ev angle: ', ev.rotation);
}