ly525/luban-h5

[Bug Report/Feeback]拖拽抖动问题,尝试的解决思路

HuiFeiYa opened this issue · 0 comments

问题描述
问题1:参考 #351

  1. 找到控制点移动事件在 support/shape.js 文件中的 mousedownForMark 方法。内部方法 move 中调用handlePointMoveProp 父级传递的 props.handlePointMove 事件。
  2. 在移动时间中发现 calcVHLine 事件导致抖动。走到 isPointMove 逻辑,在这里会更新 pos 的值,导致渲染元素时候出现抖动。
// 路径 editor/canvas/edit.js
          if (Math.abs(offset) <= 5) {
            if (isPointMove) {
               this.setElementPosition({ width: ewidth + offset })
            } else {
              this.setElementPosition({ left: eleft + offset })
            }
            this.drawVLine(referX)
            hasVLine = true
          }

问题2: 元素宽高小于0时候会出现元素被拖拽平移的效果。
可以进行限制

      // 路径 support/shape.js
      let move = moveEvent => {
       // ... 
        pos.height = newHeight > 0 ? newHeight : 0
        pos.width = newWidth > 0 ? newWidth : 0
        pos.left = newWidth > 0 ? +left + (hasL ? disX : 0) : pos.left
        pos.top = newHeight > 0 ? +top + (hasT ? disY : 0) : pos.top
        this.handlePointMoveProp(pos)
      }