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

Question

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

我已经在我的模块中构建了锤子配置，如下：

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 文档hire，还可以查看有关覆盖的 Angular 文档。