Javascript 转换后SVG元素拖动边界

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

这里有一个

代码：

SVG.extend（SVG.Element{
//得到反向点
rpoint：函数（x，y）{
返回新的SVG.Point（x，y）.transform（this.screenCTM（））
}
})
const draw=SVG（“绘图”）
常数界限={
minX:0，
米尼：0，
maxX:250，
马克西：250
}
//牵引外箱
const rect=draw
.rect（300300）
.fill（“浅灰色”）
.back（）
//绘制可拖动图标
常量图标=绘图
.rect（50，50）
.尺寸（50）
.移动（100100）
.旋转（20）
.front（）
.draggable（）
.on（'dragmove'，（e）=>{
e、 预防默认值（）
const raw=icon.rpoint（e.detail.p.x，e.detail.p.y）
设x=e.detail.p.x
设y=e.detail.p.y
x=raw.xbounds.minX？e.detail.p.x:icon.point（raw.x>bounds.maxX？bounds.maxX:bounds.minX，raw.y）.x
y=raw.ybounds.minY？e.detail.p.y:icon.point（raw.x，raw.y>bounds.maxY？bounds.maxY:bounds.minY）.y
图标移动（x，y）
})

svg.draggable.js支持约束对象。只需使用一个定义框的对象调用draggable，实际上它非常简单：

icon.draggable（bounds）

，您就完成了：svg.draggable.js支持约束对象。只需使用定义框的对象调用DragTable，实际上它非常简单：

icon.DragTable（bounds）

，您就完成了：

  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)
   })