angular - @angular/cdk/在 panzoom 中拖放

Question

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

这工作正常，直到我用 panzoom 放大或缩小。放大时，拖动会加速并且比我的鼠标移动得更快。缩小时它会减速并且比我的鼠标移动得更慢。

我认为这是由于像素位置与全景缩放中的缩放元素以某种方式造成的。

我找到了处理它的这个答案，但我无法复制它，它正在使用 JQuery 可拖动。

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

谢谢你。

标签： angularangular-materialangular-cdk-drag-droppanzoom

Answer 1

这已经在这里得到了回答：Angular CDK 拖放与 CSS-property “transform: scale(0.5)” 的缩放不能按预期工作

解决方案是使用 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