什么是捏与缩放手势与Ionic3和Hammer.JS？

我需要能够捏和缩放字体大小，在Android和iOS上。（不仅仅是我在谷歌搜索时看到的众多例子中的常规图片）。有人可以告诉我，如果在Ionic 3中使用这种简单的方法吗？什么是捏与缩放手势与Ionic3和Hammer.JS？

Documentation，推测你可以使用（捏）。但是这从来没有开箱即用。
我知道Ionic使用Hammer.JS在封面下...每this source。
Ionic Forums建议您可以使用@ViewChild的组合并手动添加listen和on处理程序来启用它。

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

更新：也许你需要touch emulator script在Macbook Pro上完成任务。我也读here

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

所以，也许这可能是为什么锤不上的本机MacBook Pro的工作..

当在离子页面上搜索手势也得到这个page（触觉/ Taptic - 这它推断是iOS的依赖）。

我还认为可能存在与index.html中的viewport配置方式的连接。但是，这似乎是一个没有得到一个干净的解决方案per this thread兔子洞，并再次这似乎是iPhone的具体情况。

我也看到了：

Gestures - Patterns on Material.io

This blog post上捏在Android变焦。

在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"属性，就可以方便检测“尖灭”与“pinchin” ......我似乎双火。

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

我知道这些其他库太（不必要的jQuery太）的：

InteractJS同样，他们的罐头捏缩放例如未能就工作的MacBook Pro的触控板。

Jester

脚注：捏的最好的实现缩放我所看到的，在Android和iOS的工作原理是this版本由迈克尔·伊泽。但是从代码分析来看，它似乎基于HammerJS 0.5的早期实现，甚至不会使用捏作为领域语言的一部分 - 就像drag，transform，tap，double_tap一样，所以它必须促进这些东西通过较低层次的抽象。不幸的是，这是为图像。

来源

2017-10-10 JGFMK

如果您尝试缩放除您正在尝试执行的任何其他操作之外的其他字体大小， – Webruster

作出反应捏缩放事件，以'n'分配计算出的类名 - 作为一个数字并将其分配给文本字段。即1级，2级，3级等1,2,3 = n - 可能有一些规模从1到5说。问题是HammerJS捏事件在Android内置于Ionic3中的版本中不稳定。 – JGFMK

从你的长篇大论地解释了一下搜索此之后的输入可能会适合您的需要，但它需要增强对您的版本，也有一些它的部件需要进行调整：

基本上有在

有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填充容器的大小，具有固定位置，并且重要touch-action: none其中HammerJS需求。

家。TS

它需要的内容弄清楚实际大小，而不页脚和头凑了过来，将for loop只是增加了等于 viewport的user sees minus the actual size of the content#zoom.原来大小的每个孩子的absolute height，由于我们覆盖了滚动，所以将会看到最有可能溢出底部和右边的内容（因为它的固定和可以是任何大小）将通过平移完成，因此我们必须知道它的溢出量有多大。

要平移的最大尺寸是原始的溢出尺寸，现在先放大，然后缩放等于1。基地是要记住我们在挤压缩放时离开的位置。

我们开始时听个别*，panend & pancancel的以及pinchend & pinchcancel分别称为取决于时机当您松开手指这样既必须加，称他们各自onEnd功能。

setCoor功能

设置x & y坐标确保它不走过去，它是最大

变换函数

动作 “翻译”，并缩放#zoom元素，xx & yy为重置位置

onPinchend功能

设定的基础上，并设置刻度

onPinch功能

的极限设定取决于规模它离开的地方。

完整的代码可以从Here得到，他已经完成了大部分的工作，如果你需要任何其他的功能添加你可以加强它。

注意：说明和代码取自Github，如果它对你有帮助，请尽量给予该作者的信任。

来源

2017-10-17 17:30:11 Webruster

这很奇怪......因为我已经阅读了相同的文字，用于类似于移动应用程序的形式，该应用程序具有带缩放的邮政包的图像以放大缩小。但是这个实现非常业余......当我编写这个程序时，我的iPhone正在安装一个ios更新..将回发链接到应用程序。但这不是我接受的答案，因为它没有那么完美。我将不得不看一看，稍后再看看它们有多相似。 – JGFMK

@JGFMK我肯定会同意这可能不是你的答案。为了提供一个解决方案，我们需要在SO中使用MVCE，所以从某个地方开始我选择了这个。当你正在研究这个回购（至少我猜测）时，我们将会有一个MVCE，我们可以工作和修改它与集体的想法，至少我会给我最好的尝试，因为它的价值尝试获得这样的好和有趣的问题的解决方案 – Webruster

这是同一个应用程序.. – JGFMK

什么是捏与缩放手势与Ionic3和Hammer.JS？

回答

相关问题