@angular/cdk/在 panzoom 中拖放

Question

我正在使用 Angular 10 和 panzoom。在 panzoom 元素内，我有使用 @angular/cdk/drag-drop 的可拖动元素。

在我使用 panzoom 放大或缩小之前，这一切正常。放大时，拖动会加速并且比我的鼠标移动得更快。缩小时，它会减速并且比我的鼠标移动得更慢。

我认为这是由于 panzoom 中像素位置与缩放元素的关系。

我找到了处理它的this answer，但我无法复制它，它使用的是 JQuery 可拖动对象。

有谁知道如何使可拖动元素在使用 panzoom 和 angular-cdk-drag-drop 放大或缩小时保持与鼠标相同的速度？

谢谢。

Answer 1

这里已经回答了：Angular CDK drag-drop with zoom by CSS-property “transform: scale(0.5)” doesn’t work as expected

解决方案是使用 CDK 的 cdkDragConstrainPosition 输出来调整当前缩放比例。

您可以通过以下方式从 panzoom 中获取当前比例：

console.log(instance.getTransform()); // prints {scale: 1.2, x: 10, y: 10}

可以在此处找到带有 panzoom 的有效 StackBlitz：https://stackblitz.com/edit/angular-ivy-b2816b?file=src/app/app.component.ts