vue-draggable-resizable使用scale缩放后，拖动鼠标位置不对如何解决

vue-draggable-resizable组件是一个基于Vue.js的可拖动、可缩放的组件库，其中scale属性用于控制缩放比例。

当你使用scale属性缩放组件时，可能会出现拖动鼠标位置不对的问题。这是因为缩放后的组件的坐标系发生了变化，而组件内部的鼠标事件仍然是基于原始的坐标系计算的。因此，你需要对拖动事件进行适当的转换，使其与新的坐标系相适应。

以下是解决这个问题的一种方法：

1. 在组件中添加一个缩放比例的变量，用于记录当前组件的缩放比例。

<template>
  <vue-draggable-resizable :w="width" :h="height" :scale="scale" @dragging="onDragging" />
</template>

<script>
export default {
  data() {
    return {
      width: 200,
      height: 200,
      scale: 1, // 添加一个scale属性，用于记录当前缩放比例
    }
  },
  methods: {
    onDragging(event) {
      const { deltaX, deltaY } = event // 获取拖动距离
      const { scale } = this // 获取当前缩放比例
      const newX = event.x / scale // 转换坐标系
      const newY = event.y / scale
      // 处理拖动事件
    }
  }
}
</script>

2. 在拖动事件的处理函数中，将拖动距离除以缩放比例，以便将坐标系转换为缩放后的坐标系。

methods: {
  onDragging(event) {
    const { deltaX, deltaY } = event // 获取拖动距离
    const { scale } = this // 获取当前缩放比例
    const newX = event.x / scale // 转换坐标系
    const newY = event.y / scale
    // 处理拖动事件
  }
}

3. 在处理拖动事件时，使用转换后的坐标系计算组件的位置。

methods: {
  onDragging(event) {
    const { deltaX, deltaY } = event // 获取拖动距离
    const { scale } = this // 获取当前缩放比例
    const newX = event.x / scale // 转换坐标系
    const newY = event.y / scale
    this.width += deltaX / scale // 使用转换后的坐标系计算组件的位置
    this.height += deltaY / scale
  }
}

通过这种方法，你就可以在缩放组件后正确地拖动鼠标了。请注意，在处理其他鼠标事件时，也需要根据需要进行适当的坐标系转换。