我需要能够在 Android 和 iOS 上进行捏合缩放以缩放字体大小。 (不仅仅是我在谷歌搜索时看到的众多示例中的常规图像)。有人可以告诉我在 Ionic 3 中是否有一种简单的方法可以做到这一点吗?
-
文档 https://ionicframework.com/docs/components/#gestures,表示您可以使用(捏)。但这从来都不是开箱即用的。
- 我知道 Ionic 在幕后使用 Hammer.JS...这个来源 https://github.com/ionic-team/ionic/blob/master/src/gestures/hammer.ts.
-
离子论坛 https://forum.ionicframework.com/t/pinch-gesture-is-not-working/69564/4建议您可以使用以下组合来启用它@ViewChild
并手动添加listen
and on
处理程序。
然后,由于某种原因,该事件永远不会在带有触摸板的 Macbook Pro 上触发,但是当我将其上传到 Ionic View 时,当我尝试捏合缩放时,该事件会触发。我想知道是否有一些导航器代理选择无法在 Macbook Pro 上启用某些功能,因为触摸板应该可以促进这一点?
更新:也许你需要触摸模拟器 http://hammerjs.github.io/touch-emulator/ script https://github.com/hammerjs/touchemulator在 Macbook Pro 上执行操作。我也在读here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1
iOS 上的 Safari 没有窗口、滚动条或调整大小按钮......用户通过轻弹手指进行平移。这
用户通过双击和捏合张开来放大,并通过
捏合关闭 - Safari 上不可用的手势
桌面。由于用户与网络交互的方式存在差异
内容,桌面上和iOS上的视口不一样。
所以也许这就是 Hammer 无法在本机 Macbook Pro 上运行的原因。
在 Ionic 页面上搜索手势时,您还会得到这个page https://ionicframework.com/docs/api/tap-click/Haptic/(Haptic/Taptic - 它推断依赖于 iOS)。
我还认为这可能与viewport https://www.w3schools.com/css/css_rwd_viewport.asp在index.html中配置。但这似乎是一个没有干净解决方案的兔子洞根据这个线程 https://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon这似乎又是 iPhone 特有的。
我还见过:
手势 - Material.io 上的模式 https://material.io/guidelines/patterns/gestures.html#gestures-touch-mechanics
这篇博文 https://medium.com/@ali.muzaffar/android-detecting-a-pinch-gesture-64a0a0ed4b41Android 上的“捏合缩放”。
使用 JSON.stringify 对事件发出警报 - 您可以使用与论坛类似的来源在 iPhone 中通过捏合来缩放这些属性。我通过查看 iPhone 警报手动输入了该属性。所以可能有奇怪的错字......而且我省略了很多实际值......
人们是否倾向于使用带有捏合事件的 RxJS 去抖动来限制放大/缩小的速度?
{"pointers": [{},{}],
"changedPointers": [{}],
"pointerType": "touch",
"srcEvent":{"isTrusted":true},
"isFirst":false,
"isFinal":false,
"eventType":2
"center":{"x":158, "y":302}
"timeStamp":
"deltaTime":
"angle":
"distance":
"deltaX":,
"deltaY":,
"offsetDirection":,
"overallVelocityX":,
"overallVelocityY":,
"overallVelocity":,
"scale":,
"rotation":,
"maxPointers":,
"velocity":,
"direction":,
"target":,
}
我也认为有一个"additionalEvent"
可以方便地检测“pinchout”与“pinchin”的属性..我似乎双火。
虽然该方法在 iPhone 上似乎很好(除了多个事件触发)...我正在测试的 Android Samsung Galaxy S4 手机似乎经常颠倒这一点,并抛出许多事件。随后我还在同事的三星 Galaxy S8 上进行了测试,它具有最新的浏览器。我想我可能需要打包一个最新的浏览器。但我认为这也不能解决问题。如果没有进行详尽的测试,Android 似乎第一次给出了正确的答案,然后它就反转了。所以我想知道每个手指的坐标是否以某种方式被缓存,因此后续的捏合和捏合请求都基于陈旧的数据。是否有 HammerJS 重置配置设置?
我也知道这些其他库(也不需要 jQuery):
交互JS http://interactjs.io/同样,他们的捏合缩放示例无法在带触摸板的 Macbook Pro 上运行。
Jester https://github.com/plainview/Jester
Footnote:我见过的捏合缩放的最佳实现,可在 Android 和 iOS 上使用this http://riagora.com/mobile/hammer/迈克尔·柴兹 (Michael CHAIZE) 的版本。但从分析代码来看,它看起来是基于 HammerJS 0.5 的早期实现,甚至没有使用捏作为域语言的一部分 - 只是像拖动、变换、点击、double_tap 这样的东西,所以它一定是在促进这些东西通过较低级别的抽象。不幸的是,这是针对图像的。