关于使用 Ionic3 和 Hammer.JS 进行捏合缩放手势的独家新闻是什么?

2024-04-29

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

  1. 文档 https://ionicframework.com/docs/components/#gestures,表示您可以使用(捏)。但这从来都不是开箱即用的。
  2. 我知道 Ionic 在幕后使用 Hammer.JS...这个来源 https://github.com/ionic-team/ionic/blob/master/src/gestures/hammer.ts.
  3. 离子论坛 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 这样的东西,所以它一定是在促进这些东西通过较低级别的抽象。不幸的是,这是针对图像的。


经过一番搜索后,从您的长解释的输入来看,这可能适合您的需求,但需要针对您的版本进行增强,并且其中的某些部分也需要调整:

基本上有

需要3个文件

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

首页.html

The <div #zoom class="zoom">element 是固定容器 您需要将事件附加到的位置,其子级是 将被缩放的项目。

主页.scss

.zoom填充容器大小,具有固定位置和 重要的touch-action: none which HammerJS needs.

home.ts

需要内容来计算没有页脚的实际大小 和标题妨碍,for loop只是添加了absolute height的每个孩子的#zoom.原始尺寸等于viewport认为user sees minus the actual size of the content, 由于我们覆盖了滚动,因此内容的查看将 最有可能溢出底部和右侧(因为它是固定的并且可以 可以是任何尺寸),将通过平移完成,所以我们必须知道它有多少 溢出来。

平移的最大尺寸是原始溢出尺寸,目前之前 缩放,scale 首先等于 1。基地是要记住在哪里 当捏合缩放时我们停止了。

我们单独启动事件侦听*、panend 和 pancancel 作为 以及inchend和pincancel根据时间分别被调用 当你松开手指时,必须将两个手指相加,以调用它们 各自的 onEnd 函数。

设置坐标函数

设置 x 和 y 坐标,确保它不会超出它的范围 最大限度

变换函数

移动“平移”,并缩放 #zoom 元素,xx 和 yy 用于重置位置

onPinchend 函数

设置基础,并设置范围的限制

onPinch 函数

根据停止位置设置比例。

完整代码可以从Here https://github.com/p-sebastian/ionic2-pinchzoom,他已经完成了大部分的工作,如果你需要添加任何其他功能你可以增强它。

Note:解释和代码取自Github https://github.com/p-sebastian/ionic2-pinchzoom,如果对您有帮助,请尝试赞扬该作者。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于使用 Ionic3 和 Hammer.JS 进行捏合缩放手势的独家新闻是什么? 的相关文章

随机推荐

  • React Datepicker(无法获取输入值)

    我是反应新手 我需要使用反应日期选择器 https github com Hacker0x01 react datepicker 当我更改日期时 我想获取输入的值 如果我点击 2017 年 10 月 20 日 我想将 2017 年 10 月
  • 在 PLSQL Oracle 中抛出特定错误消息...在休眠中捕获?

    是否可以在 PL SQL oracle 存储过程中抛出特定的错误消息 并在调用它时在 Hibernate 中捕获它 您可以从 PL SQL 代码中抛出用户定义的错误消息 20000 到 20999 之间的错误代码保留用于用户指定的错误消息
  • 检查输入时出错:预期 conv2d_1_input 有 4 个维度,但得到形状为 (800, 1000) 的数组

    我正在尝试使用 CNN 进行情感分析 我的代码我的数据具有 1000 1000 形状 当我将数据传递给 convolution2D 时 它会抛出一个错误 我无法解决 我尝试了以下解决方案 但仍然面临问题 在构建 CNN 时 我收到 Kera
  • 在 PowerShell 中解析大型 JSON 文件

    Context 在这篇文章中 ConvertFrom Json 大文件 https stackoverflow com q 76784490 268581 我询问有关反序列化 1 2GB JSON 文件的问题 这个答案发布在那里 https
  • 如何在react-styleguidist中添加具有依赖项的示例组件

    我想记录一个ButtonGroup组件渲染Button其中使用 react styleguidist 的组件 我有一个 styleguidist webpack 配置 如下所示 module exports module rules tes
  • $(document).ready(function(){ 未捕获的 ReferenceError: $ 未定义

    您好 我在使用以下代码时遇到 未捕获的引用错误 未定义 目前我的日志中出现以下错误 我一直在查看框架中的示例 但似乎找不到错误在哪里 我已经有十多年没有做过任何 HTML 或 js 了 当时我所做的都是非常基本的东西 任何帮助 将不胜感激
  • Java的JConsole可以用来自动配置内存吗?

    我正在学习JavaJMX https docs oracle com javase tutorial jmx and JConsole http docs oracle com javase 7 docs technotes guides
  • 部署程序集:当前显示的页面包含无效值

    我从 Sourceforge 导入了一个 Java Web 应用程序 我花了三个工作周的时间来消除项目名称和包上附加的所有红叉 但现在我无法使该应用程序在我的 Eclipse 和 tomcat6 开发环境上运行 在项目属性中 当我尝试设置部
  • Eclipse JSP:默认文本文件编码不正确

    我有以下问题 我创建了一个新的 动态 Web 项目 并将一些现有的 jsp 文件导入其中 如果我右键单击导入的 jsp 文件之一 然后单击 属性 gt 资源 则在 文本文件编码 部分下 值为 默认 由内容类型确定 ISO 8859 1 不过
  • 带有图标和文本的 UITableViewRowAction

    有几个类似的问题 但我认为应该有一个针对 iOS 10 的最新答案 使用 Swift3 不使用私有 API 并且不依赖于将图标限制为 unicode表情符号 我现在有包含三个操作的表行 func tableView tableView UI
  • GSON 是一个 Java Throwable

    我有一个对象 其中包含一段数据和关联的异常 Public class MyBean Private String data Private Exception problem 当我尝试GSON toJSON 对象 它给了我一个循环引用抱怨
  • 如何让石斑鱼和轴一样长?

    对于我的作业 我应该使用 matplotlib 在地图上绘制 20 场飓风的轨迹 但是 当我运行我的代码时 出现错误 AssertionError Grouper and axis must be the same length 这是我的代
  • 从彩色背景中提取黑色对象

    人眼很容易辨别black来自其他颜色 但是计算机呢 我在普通的A4纸上打印了一些色块 由于组成彩色图像有青色 品红色和黄色三种墨水 所以我设置每个块的颜色C 20 C 30 C 40 C 50 以及其余两种颜色是 0 这是我的源图像的第一列
  • sprintf 风格字符串格式化的起源

    字符串格式化概念见sprintf如今几乎可以在任何语言中找到 你知道 用 s d f 等掩盖字符串 并提供变量列表来填充它们的位置 哪种语言最初具有提供此功能的库函数或语言结构 请指定某种来源参考以确认您的主张 以便我们避免纯粹的猜测或猜测
  • 使用 JavaScript 检查复选框时更改样式

    我正在尝试 没有成功 创建一个复选框 在选中时更改正文的某些样式属性 如下所示 我究竟做错了什么 提前致谢 您需要使用事件侦听器并在侦听器内运行该脚本 您在代码中所做的是在脚本运行时设置一次颜色 您没有告诉程序每次更改复选框时都进行检查 c
  • Java中的整数除法[重复]

    这个问题在这里已经有答案了 这感觉像是一个愚蠢的问题 但我在 Java 文档中找不到答案 如果我声明两个 int 然后将它们相除 到底发生了什么 他们是否转换为floats doubles首先 划分 然后投射回integer 或者除法是作为
  • React Router v4 NavLink 活动路由

    我正在尝试使用 v3 移植我的项目react router到现在所谓的 v4react router dom 现在 当我有一个 MenuBar 组件时 问题就出现了 该组件与路由逻辑完全分开 如您所期望的 因为无论当前路径是什么 它都会显示
  • 如何替换引号之间出现的任何单词

    我需要能够替换所有出现的单词 and 仅当它出现在单引号之间时 例如 将字符串中的 and 替换为 XXX This and that with you and me and others and not her and him 结果是 T
  • 如何将TabLayout与Recyclerview同步?

    我有一个TabLayout with Recyclerview这样当单击选项卡时Recyclerview滚动到特定位置 我也想要相反的过程 这样当Recyclerview滚动到特定位置 然后该特定选项卡会突出显示 例如 如果有 4 个选项卡
  • 关于使用 Ionic3 和 Hammer.JS 进行捏合缩放手势的独家新闻是什么?

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