Question

参考下面的代码，我可以在画布框内前后拖动红线并将其停在左侧极限处。但是该行并没有在正确的极限处停止-它消失在框外，如果我向左拖动，它会重新出现。我看了fabricjs演示（独立控件，PerPixel拖放，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 });
  }

fabricjs限制对象拖动

1 个答案: