在我的离子项目中,我在离子滚动指令中放置了一些覆盖图像的图标。 使用x,y坐标并将图标位置设置为绝对(相对于离子滚动)。放置图标效果很好。
现在我希望能够在离子滚动内拖动这些图标。
我使用on-touch和on-release来冻结滚动和on-drag来获取拖动事件。
现在我遇到的问题是来自on-drag方法的$ event只给出了与窗口/文档相关的x / y坐标。
我似乎无法找到一种方法来获得相对于父级的正确x,y坐标(离子滚动):
HTML看起来像这样:
<ion-scroll zooming="true" direction="xy">
<img >
<my-icon
on-touch="vm.stopIonicScroll()"
on-release="vm.startIonicScroll()"
on-drag="vm.dragging($event, vm.start)">
</my-icont>
</ion-scroll>
我的控制器
vm.stopIonicScroll = function() {
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = false;
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = false;
};
vm.startIonicScroll = function() {
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = true;
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = true;
};
vm.dragging = function($event, element) {
console.log($event);
};
一旦我开始拖动元素,我就会正确地调用事件:
e.g。这样和$事件:
{
"gesture": {
"center": {
"pageX": 609,
"pageY": 363
},
"timeStamp": 1438260728495,
"target": {
},
"touches": {
"0": {
"target": {
},
"identifier": 3284571703,
"clientX": 609,
"clientY": 363,
"pageX": 609,
"pageY": 363,
"screenX": 609,
"screenY": 363
},
"length": 1
},
"eventType": "move",
"pointerType": "touch",
"srcEvent": {
"touches": {
"0": {
"target": {
},
"identifier": 3284571703,
"clientX": 609,
"clientY": 363,
"pageX": 609,
"pageY": 363,
"screenX": 609,
"screenY": 363
},
"length": 1
},
"targetTouches": {
"0": {
"target": {
},
"identifier": 3284571703,
"clientX": 609,
"clientY": 363,
"pageX": 609,
"pageY": 363,
"screenX": 609,
"screenY": 363
},
"length": 1
},
"changedTouches": {
"0": {
"target": {
},
"identifier": 3284571703,
"clientX": 609,
"clientY": 363,
"pageX": 609,
"pageY": 363,
"screenX": 609,
"screenY": 363
},
"length": 1
},
"scale": 1,
"rotation": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false
},
"deltaTime": 19992,
"deltaX": 252.05572809,
"deltaY": 139.527864045,
"velocityX": 0.012607829536315,
"velocityY": 0.0069791848762005,
"distance": 288.09740524333,
"angle": 28.967141193712,
"direction": "right",
"scale": 1,
"rotation": 0,
"startEvent": {
"center": {
"pageX": 356.94427191,
"pageY": 223.472135955
},
"timeStamp": 1438260708503,
"target": {
},
"touches": [
{
"target": {
},
"identifier": 3284571702,
"clientX": 348,
"clientY": 219,
"pageX": 348,
"pageY": 219,
"screenX": 348,
"screenY": 219
}
],
"eventType": "start",
"pointerType": "touch",
"srcEvent": {
"touches": {
"0": {
"target": {
},
"identifier": 3284571702,
"clientX": 1022,
"clientY": 710,
"pageX": 1022,
"pageY": 710,
"screenX": 1022,
"screenY": 710
},
"length": 1
},
"targetTouches": {
"0": {
"target": {
},
"identifier": 3284571702,
"clientX": 1022,
"clientY": 710,
"pageX": 1022,
"pageY": 710,
"screenX": 1022,
"screenY": 710
},
"length": 1
},
"changedTouches": {
"0": {
"target": {
},
"identifier": 3284571702,
"clientX": 1022,
"clientY": 710,
"pageX": 1022,
"pageY": 710,
"screenX": 1022,
"screenY": 710
},
"length": 1
},
"scale": 1,
"rotation": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"isTapHandled": true
}
}
}
}
现在,我在此事件中获得的每个x / y都与窗口/文档相关。
使用ng-click,您可以获得offsetX / offsetY
(相对于父母)。
如何使用on-drag
?
答案 0 :(得分:1)
我在短暂休息后找到了解决方案:
如果将来有人面临这个问题,这是我的解决方案:
var zoom, currentpos;
vm.stopIonicScroll = function(el) {
currentpos = {
x: el.x,
y: el.y
};
zoom = $ionicScrollDelegate.$getByHandle('plan').getScrollView().__zoomLevel;
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = false;
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = false;
};
vm.startIonicScroll = function() {
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = true;
$ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = true;
};
vm.dragging = function($event, element) {
element.x = currentpos.x + Math.round($event.gesture.deltaX / zoom);
element.y = currentpos.y + Math.round($event.gesture.deltaY / zoom);
};
澄清:
第一次触摸(stopIonicScroll)时,我将元素的当前位置和离子滚动的当前缩放级别放入变量中。
当我拖动元素时, 我使用手势deltaX / Y。
此deltaX / Y是从拖动事件的开始计算的(这就是我们需要保持初始位置的原因)。
需要使用缩放级别来调整移动的'speed'
。
答案 1 :(得分:0)
我只想添加一种更简洁的方法来防止滚动窗格滚动:
$ionicScrollDelegate.$getByHandle('plan').freezeScroll(boolean: shouldFreeze)
我在两天内遇到了同样的问题而且没有理解为什么拖动不起作用。你帮助了我很多。我忘记了zoomfactor :) 不使用Math.round可以提高准确性,在我的情况下使操作更加安全。