Angular/HammerJS - 避免在捏合/捏合时旋转手势

Question

我正在尝试在不启动旋转手势的情况下启动捏合手势。 我的目的是分别启动两个手势。

我已经在我的模块中构建了 hammer 配置，如下所示:

import * as Hammer from 'hammerjs';
import { HammerGestureConfig } from '@angular/platform-browser';

export class HammerConfig extends HammerGestureConfig{

    buildHammer(element: HTMLElement)
    {
        const hammerManager = new Hammer(element);
        let rotate = new Hammer.Rotate({enable: true});
        let pinch = new Hammer.Pinch({enable: true});
        let pan = new Hammer.Pan();

        pan.requireFailure([rotate, pinch]);
        pinch.recognizeWith(rotate);
        hammerManager.add([rotate, pan, pinch]);

        return hammerManager;
    }
}

我正在尝试:

pinch.dropRecognizeWith(rotate);

和

rotate.dropRecognizeWith(pinch);

此更改无效。仅启动旋转手势...

如果我添加:

pinch.recognizeWith(rotate);

它启动两个事件...

有什么方法可以分别启动它们吗？ 我将不胜感激任何帮助

Answer 1

我研究了我在 Angular 5、6 和 7 应用程序中使用 HammerJS 的项目，我使用不同的方式配置 HammerJS。

您在特定情况下禁用旋转/收缩/平移的想法是正确的，并且符合 documentation没关系。

Hire 是我的示例配置，没有 requireFailure 和 recognizeWith:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'swipe': {direction: Hammer.DIRECTION_ALL}, // override default settings
        'pan': {direction: Hammer.DIRECTION_ALL}
    };
}

@NgModule({
    imports: [
        AppModule
    ],
    providers: [{
        provide: HAMMER_GESTURE_CONFIG,
        useClass: MyHammerConfig
    }],
    bootstrap: [AppComponent]
})
export class AppBrowserModule {
}

这样你的配置应该是这样的:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'rotate': {
            direction: Hammer.DIRECTION_ALL,
            enable: true
        }, // override default settings
        'pinch': {
            direction: Hammer.DIRECTION_ALL,
            enable: true,
            recognizeWidth: 'rotate'
        },
        'pan': {
            direction: Hammer.DIRECTION_ALL,
            requireFailure: ['rotate, pinch']
        }
    };
}

如果这对您不起作用，请告诉我。我明天会尝试解决您的问题，因为我今天没有更多时间。

另请参阅有关根据 HammerJS 文档覆盖的 Angular 文档 hire .