类似于Instagram的强制触摸弹出模式 [英] Instagram-like force touch popup modal
问题描述
我正在尝试在其中复制Instagram的强制触摸功能
I'm trying to replicate force touch functionality of Instagram where
1)将手指放在图像上,图像会变得更暗(悬停效果,简单)
1) Put your finger on an image and it gets a little darker (hover effect, easy)
2)稍微按一下,将显示内容的弹出模式预览
2) Press a little harder and a popup modal preview of the content appears
3)更加用力按下,将模式扩展到全屏
3) Press even harder and it expands the modal to full screen
我在使用Ionic 4/Cordova"3d touch"插件时遇到问题,如果我先常规触摸屏幕,该插件不会注册强制触摸.
I'm having problems with Ionic 4/Cordova "3d touch" plugin where it doesn't register the force-touch if I regular-touch the screen first.
按顺序来说,通过threeDeeTouch.watchForceTouches()
为了让听众触发,我必须先用力进入触摸,在触摸"屏幕和按下"屏幕之间没有延迟.如果我触摸屏幕但不按屏幕,则无法在不先抬起手指的情况下再按它来触发强制触摸.
In order for the listener to trigger I have to go into the touch with force initially, with no delay between "touching" the screen and "pressing" the screen. If I touch the screen but do not press it, I can no longer press it to trigger force touch without lifting my finger first.
我正在真实的设备iPhone X上进行测试
I'm testing on a real device, iPhone X
如何解决此问题以在Instagram中复制强制触摸?
How is it possible to workaround this issue to replicate the force touch in Instagram?
推荐答案
我也在离子Cordova应用程序中尝试过相同的方法,请尝试在下面查看此内容以进行进一步的处理
Me too tried the same in ionic cordova application , try to view this below for further proceed
watchForceTouches()::当用户强行触摸Web视图时,您会收到一条通知.当最大力的至少75%施加到屏幕时,该插件将定义一个力触.您的应用将收到x和y坐标,因此您必须确定触摸了哪个UI元素.
watchForceTouches() : You can get a notification when the user force touches the webview. The plugin defines a Force Touch when at least 75% of the maximum force is applied to the screen. Your app will receive the x and y coordinates, so you have to figure out which UI element was touched.
我已经尝试过这种语法,并通过将插件版本以及下面的代码集降级来实现它
i Have tried this syntax and have achieved it by downgrading the plugin version along with below codeset
@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的强制触摸弹出模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!