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

Question

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

如果外部 DIV 由 CSS 属性“transform: scale(0.5)”缩放，则拖动不会与鼠标指针正确对齐。只要比例不等于 1，就会发生这种情况。

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

我知道这篇文章拖放缩放无法按预期工作，因此

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

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

任何帮助表示赞赏

Answer 1

我也遇到了这个问题。

这里的解决方案：初始化一个比例变量并将其用作dragConstrainPoint

  // change position of object while zooming ! (cdk fix)
    dragConstrainPoint = (point, 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 ,
        y: point.y + zoomMoveYDifference
      };