通过 CSS 属性“transform:scale(0.5)”进行缩放的 Angular CDK 拖放无法按预期工作

通过 CSS 属性“transform:scale(0.5)”进行缩放的 Angular CDK 拖放无法按预期工作。

如果外层 DIV 按 CSS 属性缩放“变换：比例（0.5）”拖动与鼠标指针未正确对齐。一旦标度不等于 1，就会发生这种情况。

这里有一个例子：https://stackblitz.com/edit/angular-2q1mte https://stackblitz.com/edit/angular-2q1mte

我知道这个帖子使用捏缩放进行拖放无法按预期工作 https://stackoverflow.com/questions/58507323/drag-and-drop-with-pinch-zoom-doesnt-work-as-expected因此

“@Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point”.

但是如何编写自定义逻辑以将拖动与指针正确映射？或者是否有任何其他解决方案可以提供缩放功能，但保持拖动与鼠标指针正确对齐？

任何帮助表示赞赏

我已经成功地让它在 Angular 12 中工作而无需使用calc()但保持transorm: scale(x):

模板：

<div cdkDrag (cdkDragStarted)="startDragging($event)" [cdkDragFreeDragPosition]="dragPosition" [cdkDragConstrainPosition]="dragConstrainPoint">

成分：

_dragPosition: { x: number, y: number } = {x: 0, y: 0};

get dragPosition(): { x: number, y: number } {
  return this._dragPosition;
}


dragConstrainPoint = (point: any, dragRef: DragRef) => {
  let zoomMoveXDifference = 0;
  let zoomMoveYDifference = 0;
  if (this.scale != 1) {
    zoomMoveXDifference = (1 - this.scale) * dragRef.getFreeDragPosition().x;
    zoomMoveYDifference = (1 - this.scale) * dragRef.getFreeDragPosition().y;
  }

  return {
    x: point.x + zoomMoveXDifference as number,
    y: point.y + zoomMoveYDifference as number
  };
};

startDragging(event: CdkDragStart) {
  const position = {
    x: this.dragPosition.x * this.scale,
    y: this.dragPosition.y * this.scale
  };
  event.source._dragRef.setFreeDragPosition(position);
  (event.source._dragRef as any)._activeTransform = this.dragPosition;
  (event.source._dragRef as any)._applyRootElementTransform(this.dragPosition.x, this.dragPosition.y);
}