vangleer / es-drager

A draggable, resizable, rotatable component based on vue3
https://vangleer.github.io/es-drager/
331 stars 50 forks source link

旋转后,边界判断异常 #31

Closed nikerck closed 8 months ago

nikerck commented 8 months ago

微信截图_20240220144521 大佬好,使用时候遇到问题,旋转后无法边界判断异常,例上图中的长方形模块经过旋转后,只能拖拽那个位置,并不能拖拽到右下角底部。 猜测旋转后边界判断依旧以原来高宽等进行判断。

复原问题代码

<div style="width: 300px;height: 300px;border: 1px solid greenyellow;position: relative;">
      <es-drager
        boundary
        rotatable
      >
      这是原来的
      </es-drager>
    </div>

个人尝试做的修改

// use-drager.ts
 const getBoundary = () => {
 // ....
// if (angle && props.scaleRatio === 1) {
    //   const rect = targetRef.value!.getBoundingClientRect()
    //   minX = Math.abs(rect.left - (left + parentElRect.left))
    //   minY = Math.abs(rect.top - (top + parentElRect.top))
    // }
if (angle) {
  const rect = targetRef.value!.getBoundingClientRect()
  minX = rect.left / props.scaleRatio  - Math.floor(left - (rect.width / props.scaleRatio - width) + parentElRect.left / props.scaleRatio)
  minY = rect.top / props.scaleRatio  - Math.floor(top - (rect.height / props.scaleRatio - height) + parentElRect.top / props.scaleRatio)
}
 // ....
vangleer commented 8 months ago

老铁 你这个方法没问题 如果能提个pr就更好了

vangleer commented 8 months ago

nice 👍