使用双指缩放进行拖放无法按预期工作

Question

在双指缩放的缩放模式下，拖动没有与鼠标指针正确对齐。

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

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

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

Answer 1

我不得不像这样手动计算更新的坐标：

此处 imageHeight 是 DOM 元素的 width/height，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)
);

使用双指缩放进行拖放无法按预期工作

Drag and drop with pinch zoom doesn't work as expected

drag-and-drop

pinchzoom

angular7

angular-material-7

angular-material-8