Question

我正在使用SVG.js创建一个可拖动的元素。我想对阻力有所限制。我正在努力创建一个平滑的拖动边界处理程序。我正在将点转换回屏幕坐标并从那里开始，但它不太正确。我知道问题出在x.y超出范围时。现在它默认为最后一个有效值，但它必须是该边界的最低/最高x和y。不知道怎么做 - 我认为有些触发。

这里是codepen

代码：

  SVG.extend(SVG.Element, {

   // Get reverse point
   rpoint: function (x, y) {
     return new SVG.Point(x, y).transform(this.screenCTM())
   }

 })

 const draw = SVG('drawing')

 const bounds = {
   minX: 0,
   minY: 0,
   maxX: 250,
   maxY: 250
 }

// Draw outer box
 const rect = draw
  .rect(300, 300)
  .fill('lightgray')
  .back()

// Draw draggable icon
 const icon = draw
  .rect(50, 50)
  .size(50)
  .move(100, 100)
  .rotate(20)
  .front()
  .draggable()
  .on('dragmove', (e) => {
     e.preventDefault()

     const raw = icon.rpoint(e.detail.p.x, e.detail.p.y)

     let x = e.detail.p.x
     let y = e.detail.p.y

     x = raw.x < bounds.maxX && raw.x > bounds.minX ? e.detail.p.x :  icon.point(raw.x > bounds.maxX ? bounds.maxX : bounds.minX, raw.y).x
     y = raw.y < bounds.maxY && raw.y > bounds.minY ? e.detail.p.y : icon.point(raw.x, raw.y > bounds.maxY ? bounds.maxY : bounds.minY).y

     icon.move(x, y)
   })

转换后的SVG元素拖动边界

0 个答案: