父级容器使用 transform: scale 动画卡顿

[Angle-bo]

pc电脑分辨率不够，使用transform: scale缩小父级容器，移动画布内的元素，动画不流畅 代码如下：

<template>
  <div style="user-select:none" ref="winMainRef">
    <div :style="'width:'+canva.width*canva.scale+'px;height:'+canva.height*canva.scale+'px;overflow: hidden; border: 1px solid #ccc;'">
      <div class="win-content p-r"
        :style="'width:'+canva.width+'px;height:'+canva.height+'px;transform: scale('+ canva.scale +');'">
        <VueDraggableResizable :parent="true"  :w="dom.w" :h="dom.h" :x="dom.x" :y="dom.y" class="coverage-video">
          <p>你可以拖着我，按照自己的意愿调整大小。</p>
        </VueDraggableResizable>
      </div>
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default {
  name: "HelloWorld",
  components:{
    VueDraggableResizable
  },
  data() {
    return {
      canva: {
        width: 5760,
        height: 1080,
        scale: 0.3125,
      },
      dom:{
        x:0,
        y:0,
        w:1024,
        h:768
      }
    };
  },
  mounted() {
    this.windowResize()
    window.onresize = () => {
        return (() => {
          this.windowResize()
        })();
      };
  },
  methods: {
    windowResize :function(){
      let winMainRef = this.$refs.winMainRef;
      const _winMainRefW = winMainRef.clientWidth;
      let winScale = (_winMainRefW - 120) / this.canva.width;
      this.canva.scale = winScale
    },
  },
};
</script>

<style>
.p-r {
  position: relative;
}

.win-content {
  background-color: #e4e4e4;
  transform-origin: left top;
}

.coverage-video {
  background-color: rgb(0, 0, 0);
  border-width: 6.46102px;
  border-color: #0ff;
}
</style>

[ents1008]

不是卡顿, 是偏移错误, 需要优化一下 使用缩放时 拖动的偏移量

[Angle-bo]

不是卡顿, 是偏移错误, 需要优化一下 使用缩放时 拖动的偏移量

啥意思？是要在onResize和onDrag中将变化的值再放大？

[Angle-bo]

找了解决办法，VueDraggableResizable组件有缩放参数，scale