Pinch to Zoom Gesture with Ionic3 and Hammer.JS 的独家新闻是什么? [英] What's the scoop on Pinch to Zoom Gesture with Ionic3 and Hammer.JS?

问题描述

我需要能够在 Android 和 iOS 上进行捏合缩放以缩放字体大小.(不仅仅是我在谷歌搜索时看到的众多示例中的常规图像).有人可以告诉我在 Ionic 3 中是否有一种简单的方法可以做到这一点?

1. 文档，推断您可以使用(捏).但这永远不会开箱即用.
2. 我知道 Ionic 在幕后使用 Hammer.JS... 根据 此来源.

3. 离子论坛建议您可以结合使用 @ViewChild 并手动添加 listen 和 on 处理程序来启用它.

   然后由于某种原因，该事件永远不会在带有触摸板的 Macbook Pro 上触发，但是当我将其上传到 Ionic View 时，当我尝试进行捏合缩放时会触发事件.我想知道是否有一些导航器代理选择无法在 Macbook Pro 上启用某些功能，因为触摸板应该有助于实现这一点?

   更新:也许你需要 touch emulator 脚本 在 Macbook Pro 上做事.我也在阅读 这里

   <块引用>

   iOS 上的 Safari 没有窗口、滚动条或调整大小按钮……用户通过轻弹手指进行平移.这用户通过双击和捏开放大，并通过缩小捏合 — Safari 上无法使用的手势桌面.由于用户与网络交互方式的差异内容，桌面和 iOS 上的视口不一样.

   所以也许这就是为什么 Hammer 不能在原生 Macbook Pro 上运行的原因..

在 Ionic 页面上搜索手势时，您还会看到此 页面(Haptic/Taptic - 它推断依赖于 iOS).

我还认为可能与 viewport 的配置方式有关在 index.html 中.但这似乎是一个没有干净解决方案的兔子洞 per this thread，这似乎是 iPhone 特有的.

我也看过:

手势 - Material.io 上的模式p>

这篇博文关于 Pinch to在 Android 上缩放.

使用带有 JSON.stringify 的事件警报 - 您可以使用与论坛类似的来源获得这些属性，通过捏合来放大 iPhone.我通过查看 iPhone 警报手动输入.所以有可能是奇怪的错字……我省略了很多实际值……

人们是否倾向于使用带有捏合事件的 RxJS debounce 来限制您放大/缩小的速度?

{"指针": [{},{}],"changedPointers": [{}],"pointerType": "触摸","srcEvent":{"isTrusted":true},是第一":假，isFinal":假，事件类型":2中心":{x":158，y":302}时间戳":增量时间":角度":距离":三角洲":，deltaY":，偏移方向":，整体速度X":，整体速度Y":，整体速度":，规模":，回转":，最大指针":，速度":，方向":，目标":，}

我还认为有一个 "additionalEvent" 属性可以方便地检测pinchout"与pinchin".我似乎是双重射击.

虽然这种方法在 iPhone 上看起来不错(除了多个事件触发)...我正在测试的 Android 三星 Galaxy S4 手机似乎经常反转它，并引发许多事件.随后，我还在同事三星 Galaxy S8 上进行了测试，它拥有最新的浏览器.我想我可能需要打包一个最新的浏览器.但我认为这也不会解决它.没有详尽的测试，看起来Android第一次给出了正确的答案，然后它反转了东西.所以我想知道每个手指的坐标是否以某种方式被缓存，所以随后的捏入和拉出请求都是基于陈旧的数据.是否有 HammerJS 重置配置设置?

我也知道这些其他库(也不需要 jQuery):

InteractJS 同样，他们的捏合缩放示例无法在带有触摸板的 Macbook Pro 上运行.

小丑

脚注:我见过的在 Android 和 iOS 上都可以使用的最佳双指缩放实现是 这个版本由 Michaël CHAIZE.但是从分析代码来看，它看起来是基于 HammerJS 0.5 的一个非常早期的实现，甚至没有使用 pinch 作为域语言的一部分——只是像拖动、变换、点击、double_tap 这样的东西，所以它一定是在促进这些东西通过较低级别的抽象.不幸的是，这是用于图像的.

解决方案

经过一番搜索后，根据您的长解释输入，这可能符合您的需要，但需要针对您的版本以及某些部分进行增强其中需要调整:

基本上都有

<块引用>

需要 3 个文件

~/src/pages/home/home.ts~/src/pages/home/home.scss~/src/pages/home/home.html

home.html

<div #zoom class="zoom"> 元素是固定容器您需要将事件附加到的位置，其子项是将被缩放的项目.

home.scss

.zoom 填充容器大小，位置固定，HammerJS 需要的重要 touch-action: none.

home.ts

在没有页脚的情况下，需要内容来计算实际大小并且标题妨碍了， for 循环 只是添加了 absolute#zoom. 的每个子项的高度.原始大小等于用户看到的viewport减去内容的实际大小，由于我们覆盖了滚动，因此查看的内容将最有可能溢出底部和右侧(因为它固定并且可以是任何大小)，将通过平移完成，所以我们必须知道它的大小溢出来.

平移的最大尺寸是原始溢出尺寸，现在之前缩放，并且比例首先将等于 1.基础是记住在哪里捏缩放时我们停止了.

我们单独启动事件监听*、panend &取消为以及 pinchend &根据时间分别调用 pinchcancel当您松开手指时，必须添加两个手指，才能调用它们的相应的 onEnd 函数.

setCoor 函数

设置 x &y 坐标确保它不会超过它最大值

变换函数

移动翻译"，并缩放#zoom 元素，xx &yy 是为了重置位置

onPinchend 函数

设定基准，设定尺度的界限

onPinch 功能

根据停止的位置设置比例.

完整的代码可以从 这里 获得，他已经完成了大部分工作，如果您需要添加任何其他功能，您可以对其进行增强.

注意:解释和代码取自 Github ，如果对您有帮助，请尝试感谢该作者.

I need to be able to do pinch to zoom to scale font sizes, on both Android and iOS. (Not just a regular image per numerous examples I've seen when Googling). Can someone let me know if theres an easy way to do this in Ionic 3?

1. Documentation, infers you can use (pinch). But this never works out of the box.
2. I know Ionic uses Hammer.JS under the covers... per this source.

3. Ionic Forums suggests you can enable it using a combination of @ViewChild and manually adding listen and on handler.

   Then for some reason the event never fires on a Macbook Pro with a touchpad, yet when I upload it to Ionic View event fires when I attempt to do pinch to zoom. I wonder if there's some navigator agent selection that doesn't enable things on the Macbook Pro, because the touchpad should facilitate this?

   Update: Maybe you need the touch emulator script to do things on a Macbook Pro. I was also reading here

   Safari on iOS has no windows, scroll bars, or resize buttons.... The user pans by flicking a finger. The user zooms in by double-tapping and pinch opening, and zooms out by pinch closing—gestures that are not available for Safari on the desktop. Because of the differences in the way users interact with web content, the viewport on the desktop and on iOS are not the same.

   So maybe this may be why Hammer doesn't work on a native Macbook Pro..

When searching on Gestures on the Ionic page you also get this page (Haptic/Taptic - which it infers is iOS dependent).

I also thought there might be a connection to the way the viewport is configured in the index.html. But that appears to be a rabbit hole that's not got a clean solution per this thread and once again this appeared to be iPhone specific.

I've also seen:

Gestures - Patterns on Material.io

This blog post on Pinch to Zoom on Android.

Using an alert on the event with JSON.stringify - you get these sort of properties with pinch to Zoom in the iPhone using similar source to the forum.. I manually typed that in by looking at a iPhone alert.. so there may be the odd typo.. and I omitted a lot of the actual values...

Do people tend to use RxJS debounce with pinch events in order to throttle the rate at which you Zoom In/Out?

{"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":,
}

I also think there's an "additionalEvent" property that can be handy for detecting "pinchout" vs "pinchin".. I seems to double fire.

Whilst that method seems fine on an iPhone (except for multiple events firing)... The Android Samsung Galaxy S4 phone I'm testing on seems to more often than not invert that, and throws up many events. I also subsequently tested on a co-workers Samsung Galaxy S8 which has an up to date browser. I thought I may have needed to package an up to date browser. But I don't think that will solve it either. Without exhaustive testing it looks like Android gives correct answer first time, thereafter it inverts stuff. So I wonder if the co-ordinates of each finger are being cached somehow, so subsequent pinch in and out requests are based on stale data. Is there a HammerJS reset configuration setting?

I'm aware of these other libraries too (that don't necessitate jQuery too):

InteractJS Again, their canned pinch to Zoom example failed to work on Macbook Pro with touchpad.

Jester

Footnote: The best implementation of pinch to zoom I've seen, that works on both Android and iOS is this version by Michaël CHAIZE. But from analysing the code it looks to be based on a really early implementation of HammerJS 0.5 and doesn't even use pinch as part of the domain language - just things like drag, transform, tap, double_tap, so it must be facilitating this stuff by a lower level abstraction. Unfortunately this was for images.

解决方案

From the inputs of your long explanation after a bit of searching this probably fit to your need but it needs to be enhanced for your version and also some of the parts of it need to be tweaking :

Basically there are

There are 3 files needed

~/src/pages/home/home.ts
~/src/pages/home/home.scss
~/src/pages/home/home.html

home.html

The <div #zoom class="zoom"> element is the fixed container that where you need to attach the events to, and its children are the items that will be zoomed.

home.scss

.zoom to fill the container size, with a fixed position and the important touch-action: none which HammerJS needs.

home.ts

It takes the Content to figure out the actual size without the footer and headers getting in the way, the for loop just adds the absolute height of each children of #zoom. The original sizes equal to the viewport that the user sees minus the actual size of the content, since we override the scroll, the viewing of the content which will most likely overflow the bottom and right (because its fixed and can be any size), will be done via panning so we must know how much its overflowing.

the max sizes to pan are the original overflowed size, for now before zooming, and scale will equal to 1 at first. base is to remember where we left off when pinched to zoom.

We initiate the event listening individually*, panend & pancancel as well as pinchend & pinchcancel are each called depending on the timing when you release the fingers so both must be added, to call their respective onEnd function.

setCoor function

sets the x & y coordinates making sure that it doesn't go past it's max

transform function

moves "translate", and scales the #zoom element, the xx & yy are for resetting the position

onPinchend function

sets the base, and sets the limits of the scale

onPinch function

sets the scale depending where it left off.

Full code can be get from Here , He has done most of the work , if you need any other functionally to be added you can enhance it .

Note: Explanation and Code taken from the Github , try to give credit to that author if it helped you.

这篇关于Pinch to Zoom Gesture with Ionic3 and Hammer.JS 的独家新闻是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！