使用捏缩放拖放无法按预期工作答案

【问题标题】：Drag and drop with pinch zoom doesn't work as expected使用捏缩放拖放无法按预期工作
【发布时间】：2020-02-18 18:49:15
【问题描述】：

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

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

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

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

【问题讨论】：

我有最后一个版本，但是没办法保存问题，你有解决办法吗？

标签： drag-and-drop angular7 pinchzoom angular-material-7 angular-material-8

【解决方案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)
);

【讨论】：