建议适配容器的缩放功能

[junglejay]

你好，最近在使用该组件做大屏展示功能，为了在小屏幕展示我的页面需要进行缩放，但是缩放后导致拖拽和调整大小都会出现鼠标指针便宜的问题，本地调试的解决方案是，在组件上新增一个scaleRatio属性，在页面中计算出缩放比例传给组件，在组件的snapToGrid方法中return [x/this.scaleRatio, y/this.scaleRatio]，即可适配缩放，请考虑采纳该方案，谢谢

[gorkys]

非常感谢你提出的建议
但是我想不必在组件中增加新的属性，在实际应用中可以添加resize事件，当窗口被缩放后动态计算缩放比例，在给组件传入X，Y时即可将缩放比例加入其中。

<vdr
              v-for="(item,index) in elements"
              :parent="true"
              :x="item.x * proportion"
              :y="item.y * proportion"
              :w="item.width * proportion"
              :h="item.height * proportion"
              :z="item.zIndex"
              :key="item.id"
              :snap="true"
              :snap-tolerance="5"
              :is-conflict-check="item.isCheck">
</vdr>

这样即不用去改变组件，又能根据窗口大小进行动态修改缩放比例。

[junglejay]

你好，你所说的做法我一开始尝试过，但是这样只能改初始的位置大小并不能解决drag和resize的问题，后面变化的时候因为div被缩放了，导致实际鼠标的偏移量和div变化值并不相等，所以会出现鼠标指针与handle的距离越来越远，我还尝试了很多在resizing事件中修正偏移量的做法，也不能完美解决，于是才想到要去修改snapToGrid方法

[gorkys]

应该还要配合resizing、dragging等事件来同步数据，而不是单单在初始化位置的时候使用它们。我以前针对窗口的缩放是使用过所述的解决方案，不过你的提议，我想我可以测试一下后再决定是否添加进去。因为它涉及到了resizing、dragging返回的数据~

[junglejay]

感谢你的理解，需要满足的场景是无论放大或缩小父容器，原先的布局块都可以无缝衔接，拖拽和改变大小功能都能正常使用，如果有更好的方案也希望赐教

[gorkys]

@junglejay 有没有复现你所述问题的代码，或者留个Q，交流一下。

[junglejay]

@gorkys 刚出差回来，欢迎交流，466368675

[gorkys]

留个demo代码供后来者参考。

<template>
  <div id="app">
    <div :style="`height: 1080px; width: 1920px; border: 1px solid red; position: relative; transform:scale(${scaleRatio})`">
        <vue-draggable-resizable :w="400" :h="300" @resizing="onResizing" @dragging="onDragging" :parent="true" :debug="false" :scaleRatio="scaleRatio">
          <p>
            left: {{left}}<br/>
            top: {{top}}<br/>
            width: {{width}}<br/>
            height: {{height}}
          </p>
        </vue-draggable-resizable>
    </div>
  </div>
</template>

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

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      scaleRatio: 0,
      left: 0,
      top: 0,
      width: 0,
      height:0
    }
  },
  mounted () {
    let windowWidth = window.innerWidth
    this.scaleRatio = (windowWidth / 1920).toFixed(2)
    window.onresize = (e) => {
      this.setScaleValue()
    }
  },
  computed: {

  },
  methods: {
    setScaleValue () {
      let windowWidth = window.innerWidth
      this.scaleRatio = (windowWidth / 1920).toFixed(2)
    },
    onResizing(left, top, width, height){
      this.left = left
      this.top = top
      this.width = width
      this.height = height
    },
    onDragging(left, top){
      this.left = left
      this.top = top
    }
  }
}
</script>

<style>
  .vdr {
    border: 1px dashed black;
  }
</style>

[devzwy]

你好，最近在使用该组件做大屏展示功能，为了在小屏幕展示我的页面需要进行缩放，但是缩放后导致拖拽和调整大小都会出现鼠标指针便宜的问题，本地调试的解决方案是，在组件上新增一个scaleRatio属性，在页面中计算出缩放比例传给组件，在组件的snapToGrid方法中return [x/this.scaleRatio, y/this.scaleRatio]，即可适配缩放，请考虑采纳该方案，谢谢

这样直接除会有精度丢失问题吧，不能被整除部分精度就丢了