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 。

您在特定情况下禁用旋转/捏合/平移的想法是正确的，并且根据文档可以。

租赁是没有我的示例配置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 文档。