drag-and-drop - 使用捏缩放拖放无法按预期工作

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)
);