- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在 SVG 环境中创建多手势导航。我已经能够通过 Hammer.js 提供的示例,通过对 CSS3 属性应用转换来成功实现拖放和捏合缩放和旋转。
转换似乎有效,但是当我进行第二次转换/旋转时,问题出现了,原点似乎丢失了,并且两个运动之间存在跳跃。
这是一个 jsfiddle,其中包含该问题的实现。您可以通过按住 maj 按钮来尝试多点触控(用于旋转/缩放)。
canvas = {
posX: 0,
posY: 0,
lastPosX: 0,
lastPosY: 0,
xImage: 0,
yImage: 0,
xLast: 0,
yLast: 0,
newPosX: 0,
newPosY: 0,
anchorX: 0,
anchorY: 0,
lastAnchorX: 0,
lastAnchorY: 0,
bufferX: 0,
bufferY: 0,
scale: 1,
lastScale: undefined,
rotation: 0,
last_rotation: undefined,
dragReady: 0,
transformOrigin: '',
initTouch: function () {
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
var hammertime = Hammer(document.getElementById('container'), {
transform_always_block: true,
transform_min_scale: 1,
drag_block_horizontal: true,
drag_block_vertical: true,
drag_min_distance: 0
});
var posX = 0,
posY = 0,
lastPosX = 0,
lastPosY = 0,
bufferX = 0,
bufferY = 0,
scale = 1,
last_scale,
rotation = 1,
last_rotation,
dragReady = 0;
hammertime.on('touch drag dragend transform', function (ev) {
elemRect = document.getElementById('viewport');
canvas.manageMultitouch(ev);
});
},
manageMultitouch: function (ev) {
switch (ev.type) {
case 'touch':
canvas.last_scale = canvas.scale;
canvas.last_rotation = canvas.rotation;
break;
case 'drag':
canvas.posX = ev.gesture.deltaX + canvas.lastPosX;
canvas.posY = ev.gesture.deltaY + canvas.lastPosY;
break;
case 'transform':
canvas.rotation = canvas.last_rotation + ev.gesture.rotation;
canvas.scale = Math.max(1, Math.min(canvas.last_scale * ev.gesture.scale, 10));
canvas.anchorX = (ev.gesture.center.pageX - canvas.lastPosX);
canvas.anchorY = (ev.gesture.center.pageY - canvas.lastPosY);
canvas.transformOrigin = canvas.anchorX + " " + canvas.anchorY;
break;
case 'dragend':
canvas.lastPosX = canvas.posX;
canvas.lastPosY = canvas.posY;
break;
}
var transform =
"translate3d(" + canvas.posX + "px," + canvas.posY + "px, 0) " +
"scale3d(" + canvas.scale + "," + canvas.scale + ", 0) " +
"rotate(" + canvas.rotation + "deg) ";
elemRect.style.transform = transform;
elemRect.style.oTransform = transform;
elemRect.style.msTransform = transform;
elemRect.style.mozTransform = transform;
elemRect.style.webkitTransform = transform;
elemRect.style.webkitTransformOrigin = canvas.transformOrigin;
}
}
$(document).ready(function () {
canvas.initTouch();
});
最佳答案
根据我的理解,你的问题是,你正在修改转换中心(transform-origin)。我理解您想要实现的目标,即让新的修改以捏合/旋转手势的中心为中心应用。但是,通过更改变换中心,您还会更改之前应用的所有变换的中心,从而导致跳跃行为。
为了实现你想要的,你可能需要做一些矩阵运算并使用css矩阵属性。理论上我猜你:
希望这有帮助
本杰明
关于javascript - 使用 Hammerjs、CSS-Transform 和 Transform origin 进行手势移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23361838/
我正在尝试运行简单的手势代码,例如在浏览器上点击滑动 var myElement = document.getElementById('myElement'); // cre
我正在为这个正在开发的应用程序使用 Hammer.js v2.0.4。这个想法是,当您点击底部时,会弹出一个模态(模态一),如果您按下 500 毫秒(或更长时间),则会显示另一个模态(模态二)。 在桌
我正在尝试添加 HammerJS:http://hammerjs.github.io/api/ 用于动态添加的元素。 Hammer.on('.vc', "tap", function (ev) {
我在 HammerJS 中使用拖动事件来更改输入范围的值。 如果我在每个拖动事件上更改输入范围的值,HammerJS 会持续快速触发它,以至于某些移动设备崩溃。 如何限制拖动事件中的函数调用率? 最佳
我对 Javascript 知之甚少,但需要在我正在进行的项目中使用 Hammer.js。 我尝试使用拉动刷新脚本来刷新页面,而不是替换/刷新图像。 我尝试添加 location.reload(
我有一个完美工作的 hammerjs 拖动监听器,它可以像我期望的那样捕获拖动。但是,当您放手时,在 dragend 被触发 之后,它也会触发 click 事件。因此,如果您单击以拖动(移动)目标,并
我正在开发这个小网站:Website ;我正在使用 HammerJS 作为触摸支持库。 它似乎在响应事件,并且识别 event.type 属性,但是当我试图获取 event.direction 或其他
考虑两个带有“点击”事件处理程序的嵌套 div: var parent = document.getElementById("parent"); parent.addEventListener("cl
如何区分同一元素上的滑动和拖动?我试过: Hammer(blueDiv).on('swipe', function(e) { e.gesture.stopDetect(); e.gestu
我正在使用 Hammerjs 的 jQuerys 插件。 $('.grab').hammer().on('pan', function(ev){console.info(ev)); //(44) pa
我使用 Hammer.js (v2.0.8) 显示左侧菜单,但同一页面中还有一个轮播(带有 owl carousel v2.3.4)。当我滑动轮播时,菜单也会打开。我尝试了 Hammer.off()
我可以使用 HammerJS 实现发布后拖动吗(以及如何...)? (我将它与 AngularJS 一起使用,但这无关紧要) 我问的原因是我想实现平滑滚动(就像原生iOS在松开手指后继续滚动) 我相信
所以我有一个标题..和一个图像。在平板电脑上,我希望能够捏合并放大图像,但我很挣扎。我看过其他类似的问题。但由于我仍在学习,我不完全确定我出了什么问题也需要修复。 Title
我正在尝试在不启动旋转手势的情况下启动捏合手势。我的目的是分别启动两个手势。 我已经在我的模块中构建了 hammer 配置,如下所示: import * as Hammer from 'hammerj
编辑:该代码片段在嵌入问题时工作正常,但在编辑时则不然;这让我意识到这与可以滚动的底层容器有关...我在手机上测试了这一点,锤子在没有 overflow 属性的小区域上工作得很好。 我更新了代码片段以
我想用hammerjs手势旋转一个3D对象。 基本上是轮换工作,但有两个问题我无法弄清楚。 旋转方向随机变化。它向左转。我停下来,再次以同样的方式移动手指,突然,它不再继续向左旋转,而是向右旋转。有时
我正在使用在这里找到的 Hammer.js: http://eightmedia.github.io/hammer.js/ 然后我像这样设置/创建 Hammer 对象: var hammertime
我正在使用 ImpactJS 引擎 ( http://impactjs.com/ ) 构建游戏。游戏需要拖动和滑动等手势。因此,HammerJS 被集成到代码中。 在下面的代码片段中,当左键单击绑定(
我正在尝试在 HammerJS 中手动触发该事件,但到目前为止我看不到任何进展。此外,这里还提供了 HammerJS 文档 wiki 版本 1 的链接。 有人可以告诉我如何使用 HammerJS 2.
我将我的 Angular 2 CLI 项目从 1.0.0-beta.11-webpack.2 更新为 1.0.0-beta.11-webpack.8 通过 ng 初始化。我的项目使用 Angular
我是一名优秀的程序员,十分优秀!