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

2024-04-28

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

1)将手指放在图像上,图像会变暗(悬停效果,简单)

2)用力按一下,就会出现内容的弹出模式预览

3)用力按压,模式将扩展至全屏

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

换句话说,上面的步骤 2 在通过监听时不会触发强制触摸threeDeeTouch.watchForceTouches()

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

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

如何解决这个问题以在 Instagram 中复制强制触摸?


我也在离子科尔多瓦应用程序中尝试了相同的方法,尝试查看下面的内容以进一步进行

watchForceTouches() :当用户用力触摸 webview 时,您可以收到通知。该插件定义了当至少 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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

类似 Instagram 的强制触摸弹出模式 的相关文章

随机推荐