Question

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

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

无论缩放如何，我都希望拖动以相同的方式工作。我在角材料的版本8中看到他们添加了@Input（'cdkDragConstrainPosition'） constrainPosition：（point：Point，dragRef：DragRef）=> Point，这可以解决我的问题，因为在缩放模式下，我可以编写自定义逻辑以使用指针正确地映射拖动，但是在那里我无法升级到版本8是版本7的应用程序的其他部分。

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

Answer 1

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

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

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项目的位置：

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

用捏缩放进行的拖放无法正常工作

1 个答案: