用Ionic3和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. Ionic论坛建议你可以使用<$ c $的组合启用它c> @ViewChild 并在处理程序上手动添加 listen 和。

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.

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

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?

更新：也许你需要触摸模拟器 脚本在Macbook Pro上做事。我还在阅读这里

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

iOS上的Safari没有窗口，滚动条或调整大小按钮....用户通过轻弹手指来平移。
用户通过双击和捏开来放大，并在
桌面上缩小
捏闭手势，这些手势不适用于Safari。由于用户与web
内容交互的方式不同，桌面和iOS上的视口不一样。

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.

所以也许这可能就是为什么Hammer不适用于原生Macbook Pro ..

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

搜索时在Ionic页面上的手势上，您还可以获得页面（Haptic / Taptic） - 它推断是iOS依赖的。）

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

我还认为可能与视口在index.html中配置。但这似乎是一个兔子洞，没有一个干净的解决方案每个帖子，再一次这似乎是iPhone特定的。

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.

我也看到了：

手势 - Material.io上的模式

此博客文章关于Android上的缩放。

This blog post on Pinch to Zoom on Android.

使用警报在使用JSON.stringify的事件上 - 你得到这些属性与pinch放大iPhone使用类似的论坛来源..我通过查看iPhone警报手动输入..所以可能有奇怪的错字。 。我省略了很多实际价值......

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...

做pe ople倾向于使用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的属性..我似乎加倍了火。

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

虽然这种方法在iPhone上似乎很好（除了用于多个事件发射）...我正在测试的Android三星Galaxy S4手机似乎经常反转它，并引发了许多事件。我随后在一位拥有最新浏览器的同事三星Galaxy S8上进行了测试。我以为我可能需要打包一个最新的浏览器。但我认为这也不会解决它。没有详尽的测试，看起来Android第一次提供了正确的答案，之后它反转了东西。所以我想知道每个手指的坐标是否都以某种方式被缓存，因此后续的进出请求都是基于过时的数据。是否有HammerJS重置配置设置？

我也知道这些其他库（也不需要jQuery）：

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

InteractJS 再次，他们的缩放缩放示例无法在Macbook上运行Pro带触摸板。

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

Jester

脚注：我见过的最好的缩放缩放实现，适用于Android和iOS都是版本/riagora.com/mobile/hammer/rel =nofollow noreferrer。但是从分析代码开始，它看起来基于HammerJS 0.5的早期实现，甚至不使用pinch作为域语言的一部分 - 就像拖动，转换，点击，double_tap这样的东西，所以它必须促进这个东西通过较低级别的抽象。不幸的是，这是用于图像。

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 :

基本上有

需要3个文件

There are 3 files needed

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

home.html

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

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 填充容器大小，固定位置和
重要 touch-action：none 哪个 HammerJS 需求。

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

home.ts

需要内容来确定实际大小没有页脚
和标题妨碍， for循环只需添加绝对
高度每个孩子的 #zoom。原始大小等于
viewport 表示用户看到减去内容的实际大小，
，因为我们覆盖了滚动，查看内容，
最有可能溢出底部和右边（因为它是固定的并且可以
是任何尺寸），将通过平移来完成，所以我们必须知道它的
溢出多少。

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.

最大尺寸pan是原始溢出的大小，现在在
缩放之前，并且scale首先等于1。基数是要记住我们在收缩时放弃的
。

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.

我们发起单独监听的事件*，panend& pancancel和
以及pinchend&每次调用pinchcancel取决于你释放手指的时间
所以必须添加两个，以便分别调用他们的
onEnd函数。

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函数

设置x& y坐标确保它没有超过
max

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

转换功能

移动translate，并缩放#zoom元素，xx& yy是
重置头寸

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

onPinchend功能

套基数，并设置比例限制

sets the base, and sets the limits of the scale

onPinch功能

设置比例取决于它停止的地方。

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 .

注意：解释和代码取自 Github ，如果它帮助了你，请尝试给予该作者。

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

这篇关于用Ionic3和Hammer.JS捏缩放手势的独家新闻是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！