用捏缩放进行的拖放无法正常工作 [英] Drag and drop with pinch zoom doesn't work as expected

问题描述

在缩放模式下进行捏缩放时，拖动与鼠标指针无法正确对齐。

In the zoomed mode for pinch-zoom the drag doesn't align properly with the mouse pointer.

我在这里详细说明了问题： https://stackblitz.com/edit/angular-t7hwqg

I've detailed the problem here:https://stackblitz.com/edit/angular-t7hwqg

我希望拖动操作与缩放无关。
我在角材料的版本8中看到了，他们已经添加了@Input（'cdkDragConstrainPosition'）
constrainPosition：（point：Point，dragRef：DragRef）=> Point，它将解决我的问题，如缩放模式下，我可以编写自定义逻辑以使用指针正确映射拖动，但是由于应用程序的其他部分的版本为7，所以我无法升级到版本8。

I expect the drag to work same way irrespective of the zoom. I saw in version 8 of angular material they have added @Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point, which will solve my problem as in the zoomed mode I can write a custom logic to map the drag properly with pointer, but I can't upgrade to version 8 as there are other parts of the application with version 7.

那么如果有人可以建议可以做什么？可以以某种方式修改拖动并考虑当前的缩放量，或者如果我可以从材料的版本8中获取 cdkDragConstrainPosition并集成到当前的包中。

So if someone can suggest what can be done? Either somehow the drag can be modified and take into account the current amount of zoom, or if I can take 'cdkDragConstrainPosition' from version 8 of material and integrate into my current packages.

推荐答案

我必须手动计算更新后的坐标，如下所示：

I had to manually calculate the updated coordinates something like this:

此处imageHeight是DOM元素的宽度/高度，height是加载到DOM元素中的实际图像高度。
项目是要移动的DOM元素。

Here imageHeight is the width/height of the DOM element and height is the actual image height that was loaded into the DOM element. item is the DOM element to be moved around.

this.zoomFactorY = this.imageHeight / this.height;
this.zoomFactorX = this.imageWidth / this.width;

// to be called at every position update
const curTransform = this.item.nativeElement.style.transform.substring(12,
                         this.item.nativeElement.style.transform.length - 1).split(',');
const leftChange = parseFloat(curTransform[0]);
const topChange = parseFloat(curTransform[1]);

，然后更新DOM项的位置：

and then update the DOM item's location:

item.location.left = Math.trunc(
  item.location.left + leftChange * (1 / this.zoomFactorX)
);
item.location.top = Math.trunc(
  item.location.top + topChange * (1 / this.zoomFactorY)
);

这篇关于用捏缩放进行的拖放无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！