Question

我正在尝试在其中复制Instagram的强制触摸功能

1）将手指放在图像上，图像会变暗（悬停效果，简单）

2）稍微按一下，将显示内容的弹出模式预览

3）更加用力按下，将模式扩展到全屏

我在使用Ionic 4 / Cordova“ 3d touch”插件时遇到问题，如果我先常规触摸屏幕，该插件不会注册强制触摸。

按顺序来说，通过threeDeeTouch.watchForceTouches()收听时，上面的步骤2不会触发强制触摸

为了让听众触发，我必须先用力进入触摸，在“触摸”屏幕和“按下”屏幕之间没有延迟。如果我触摸屏幕但不按屏幕，则无法在不先抬起手指的情况下再按它来触发强制触摸。

我正在真实的设备iPhone X上进行测试

如何解决此问题以在Instagram中复制强制触摸？

Answer 1

我在离子式科尔多瓦应用中也尝试过相同的方法，请尝试在下面查看此内容以进一步进行

watchForceTouches（）：：当用户强行触摸Web视图时，您会收到通知。当最大力的至少75％施加到屏幕时，该插件将定义一个力触。您的应用将收到x和y坐标，因此您必须确定触摸了哪个UI元素。

我已经尝试过这种语法，并通过将插件版本以及下面的代码集降级来实现它

    @implementation ForceTouchRecognizer

double lastEvent = 0;

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    for (UITouch* touch in touches) {
        CGFloat percentage = (touch.force / touch.maximumPossibleForce) * 100;
        if (percentage >= 75) {
            // let's not flood the callback with multiple hits within the same second
            NSTimeInterval ts = touch.timestamp;
            int diff = ts - lastEvent;
            if (diff > 0) {
                lastEvent = ts;
                CGPoint coordinates = [touch locationInView:self.view];
                NSMutableDictionary *result = [[NSMutableDictionary alloc] initWithObjectsAndKeys:
                                               [NSString stringWithFormat:@"%d", (int)percentage]   , @"force",
                                               [NSString stringWithFormat:@"%d", (int)coordinates.x], @"x",
                                               [NSString stringWithFormat:@"%d", (int)coordinates.y], @"y",
                                               // no need to use the touch.timestamp really since it's simply 'now'
                                               [NSString stringWithFormat:@"%f", [[NSDate date] timeIntervalSince1970]], @"timestamp",
                                               nil];

                CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:result];
                pluginResult.keepCallback = [NSNumber numberWithBool:YES];
                [_commandDelegate sendPluginResult:pluginResult callbackId:_callbackId];
            }
        }
    }
}
@end

类似于Instagram的强制触摸弹出模式

1 个答案: