ограничивающий объект

Question

Обращаясь к приведенному ниже коду, я могу перетаскивать красную линию назад и вперед внутри поля холста и останавливать ее на левом пределе.Но линия не останавливается на правом пределе - она ​​исчезает за рамкой и появляется снова, если я перетаскиваю влево.Я посмотрел на демонстрационные материалы fabricjs (Standalone Controls, PerPixel Drag and Drop, Stickman) и заметил, что объекты можно перетаскивать «вне поля зрения» аналогичным образом.Это характерно для 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 });
  }