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可以。

这里是我的示例配置，没有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']
        }
    };
}

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

还请参阅Angular文档，其中涉及根据HammerJS文档hire进行的覆盖。

Angular / HammerJS-避免在放大/缩小时旋转手势

1 个答案: