drag-and-drop - 通过 CSS-property “transform: scale(0.5)” 缩放的 Angular CDK 拖放无法按预期工作

Question

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

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

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

我知道这个帖子 Drag and drop with pinch zoom doesn't work as expected因此

“@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
      };