当使用`vue-draggable-resizable`的`
scale`属性对元素进行
缩放时，元素的实际大小和在屏幕上的显示大小会有所不同，导致鼠标位置与实际元素大小不匹配的
问题。
解决这个
问题可以通过调整鼠标位置。
具体来说，可以在元素
缩放后重新计算鼠标在元素内部的相对位置，然后将其调整到正确的位置。这可以通过以下步骤来实现：
1. 获取当前元素的
缩放比例和实际大小，可以通过`this.$refs`获取到当前元素的DOM对象，然后从DOM对象中获取
缩放比例和实际大小。
```
javascript
const
scale = this.$refs.element.style.transform.match(/
scale\(([^\)]+)\)/)[1];
const
scaleValue = parseFloat(
scale.split(',')[0].substr(6));
const actualWidth = this.$refs.element.offsetWidth /
scaleValue;
const actualHeight = this.$refs.element.offsetHeight /
scaleValue;
```
2. 获取当前鼠标在元素内部的相对位置，可以通过`event.offsetX`和`event.offsetY`获取鼠标在元素内部的相对位置。
```
javascript
const mouseX = event.offsetX;
const mouseY = event.offsetY;
```
3. 根据
缩放比例和实际大小，以及当前鼠标在元素内部的相对位置，计算出正确的鼠标位置。
```
javascript
const correctX = mouseX / this.width * actualWidth;
const correctY = mouseY / this.height * actualHeight;
```
4. 将鼠标位置更新为正确的位置。
```
javascript
event.target.style.left = `${event.pageX - correctX}px`;
event.target.style.top = `${event.pageY - correctY}px`;
```
完整的示例代码如下：
```
javascript
<template>
<vue-draggable-resizable
ref="element"
:w="100"
:h="100"
:
scale="
scale"
:onResizeStop="handleResizeStop"
>
<div class="box"></div>
</vue-draggable-resizable>
</template>
<script>
export default {
data() {
return {
scale: 1,
};
},
methods: {
handleResizeStop(event) {
const
scale = this.$refs.element.style.transform.match(/
scale\(([^\)]+)\)/)[1];
const
scaleValue = parseFloat(
scale.split(',')[0].substr(6));
const actualWidth = this.$refs.element.offsetWidth /
scaleValue;
const actualHeight = this.$refs.element.offsetHeight /
scaleValue;
const mouseX = event.offsetX;
const mouseY = event.offsetY;
const correctX = mouseX / this.width * actualWidth;
const correctY = mouseY / this.height * actualHeight;
event.target.style.left = `${event.pageX - correctX}px`;
event.target.style.top = `${event.pageY - correctY}px`;
},
},
};
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
background-color: red;
}
</style>
```
需要注意的是，这种
方法只适用于元素只进行了
缩放的情
1061
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
