cdkDrag 具有角度 14 奇怪行为的变换比例答案

【问题标题】：cdkDrag with Transform scale in angular 14 weird behaviorcdkDrag 具有角度 14 奇怪行为的变换比例
【发布时间】：2022-08-23 21:01:58
【问题描述】：

我正在编写一个 Angular 14 应用程序，它包含一个可使用 cdkDrag 拖动的 div 元素，并且还有两个按钮可以放大或缩小 div。

所以在组件中我保存了一个scale版本，默认为1，缩放按钮从缩放变量添加或dec 0.1，我使用ngStyle和[ngStyle]=\"{ transform: \'scale(\' + scale + \')\' }\"定义了div的样式，并添加了cdkDrag支持在屏幕上拖动这个 div。

因为拖放使用变换和缩放每当我尝试放大或缩小几次然后移动它时使用变换，然后再次缩放它并移动它..它有一个奇怪的行为回到原始位置并在移动时返回原始大小。

我从几年前看到了一些旧的错误报告，但我找不到任何可以帮助我的情况。

所以我的模板文件是这样的：

<div cdkDrag [ngStyle]=\"{ transform: \'scale(\' + scale + \')\' }\">
  <button mat-icon-button (click)=\"zoomIn()\" color=\"primary\">
    <mat-icon>zoom_in</mat-icon>
  </button>
  <button mat-icon-button (click)=\"zoomOut()\" color=\"primary\">
    <mat-icon>zoom_out</mat-icon>
  </button>
  <p>Start editing to see some magic happen :)</p>
</div>

我也在Stackblitz link转载

任何有关此问题的信息将不胜感激。

看起来，您的代码和 cdk 都试图将转换应用于同一个元素，这导致了这种行为。看起来 cdk 有一个动画，可以将您拖动的元素缩放 1.2，这与您的冲突。您可以尝试添加一个额外的 div 并将您的样式与 cdkDrag div 分开。
drag-preview{ -webkit-transform:scale(1,1); transform:scale(1,1); } 我认为这就是你要找的。

标签： scale angular-cdk-drag-drop angular14

【解决方案1】：

我在我的项目中解决问题的方式是我有一个在拖动的元素内缩放的元素。

<div cdkDrag >
    <div[ngStyle]="{ transform: 'scale(' + scale + ')' }">

Stackblitz example

【讨论】：