vue-draggable-resizable使用scale缩放后拖动鼠标位置不对

在使用 `vue-draggable-resizable` 进行缩放时，因为缩放会改变元素的尺寸和位置，所以在缩放后拖动鼠标时会出现位置不对的情况。

解决这个问题的一种方式是，在缩放时计算出缩放前和缩放后元素中心点的偏移量，然后在拖动时将鼠标位置加上这个偏移量。具体步骤如下：

1. 在 `vue-draggable-resizable` 组件中，添加 `scale` 相关的事件监听函数。

<vue-draggable-resizable
  ...
  @dragging="onDragging"
  @resizing="onResizing"
  ...
>
  ...
</vue-draggable-resizable>

2. 在事件监听函数中计算偏移量。

data() {
  return {
    // 记录缩放前和缩放后元素中心点的偏移量
    centerOffsetX: 0,
    centerOffsetY: 0
  }
},
methods: {
  onDragging(event) {
    // 缩放前的元素中心点位置
    const centerX1 = event.draggableEvent.clientX + event.width / 2
    const centerY1 = event.draggableEvent.clientY + event.height / 2

    // 缩放后的元素中心点位置
    const centerX2 = centerX1 * event.delta.scaleX
    const centerY2 = centerY1 * event.delta.scaleY

    // 计算偏移量
    this.centerOffsetX = centerX2 - centerX1
    this.centerOffsetY = centerY2 - centerY1
  },
  onResizing(event) {
    // 缩放前的元素中心点位置
    const centerX1 = event.draggableEvent.clientX + event.width / 2
    const centerY1 = event.draggableEvent.clientY + event.height / 2

    // 缩放后的元素中心点位置
    const centerX2 = centerX1 * event.delta.scaleX
    const centerY2 = centerY1 * event.delta.scaleY

    // 计算偏移量
    this.centerOffsetX = centerX2 - centerX1
    this.centerOffsetY = centerY2 - centerY1
  }
}

3. 在拖动事件的回调函数中将鼠标位置加上偏移量。

onDrag(event) {
  const left = event.x + this.centerOffsetX
  const top = event.y + this.centerOffsetY
  this.left = left
  this.top = top
}

这样，在缩放后拖动时就可以保持正确的位置了。