fabricjs 限制对象拖动

Question

参考下面的代码，我可以在canvas框内来回拖动红线，让它停在左边的极限。但是这条线并没有停在右边的极限——它会消失在方框之外，如果我向左拖动，它会重新出现。我查看了 fabricjs 演示（独立控件、PerPixel 拖放、Stickman）并注意到可以以类似的方式拖动对象 "out of sight"。这是fabricjs的特性，还是有什么方法可以修复我的代码，使红线不能被拖出正确的限制？

var canvas = new fabric.Canvas('cnvs');

var leftLimit = 20;
var rightLimit = 400;


var redLine = new fabric.Line([leftLimit, 0, leftLimit, canvas.height], {
  stroke: 'red',
  strokeWidth: 2,
  borderColor: 'white',
  hasControls: false
});

canvas.add(redLine);
canvas.renderAll();

canvas.on('object:moving', function(e) {
  redLine = e.target;
  redLine.set({
    top: 0
  });

  if (redLine.left < leftLimit) {
    redLine.set({
      left: leftLimit
    });
  }

  if (redLine > rightLimit) {
    redLine.set({
      left: rightLimit
    });
  }

  canvas.renderAll();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id="cnvs" width="500" height="200" style="border:1px solid #000000"></canvas>

Answer 1

我不确定您是否打错了字，但是 (redLine > rightLimit) 没有任何意义。你应该比较 left:

  if (redLine.left > rightLimit) {
    redLine.set({ left: rightLimit });
  }

或者，因为你的线有一定的宽度，你可以让它停止而不重叠边界：

  if (redLine.left + redLine.strokeWidth > rightLimit) {
    redLine.set({ left: rightLimit - redLine.strokeWidth });
  }

fabricjs 限制对象拖动

fabricjs limiting object drag

drag

fabricjs