fabricjs如何限制拖拽范围

Question

如图所示图片是设置的backgroundImg，画布可以缩放和拖拽，拖拽的时候怎么限制不能脱离边框

Answer 1

监听拖拽事件，判断下坐标有没有超出边框

Answer 2

简单一点，监听拖拽事件，再通过Object.isOnScreen判断图形是否在屏幕内

Answer 3

function keepPositionInBounds() {
  var zoom = canvas.getZoom();
  var xMin = ((2 - zoom) * canvas.getWidth()) / 2;
  var xMax = (zoom * canvas.getWidth()) / 2;
  var yMin = ((2 - zoom) * canvas.getHeight()) / 2;
  var yMax = (zoom * canvas.getHeight()) / 2;

  var point = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
  var center = fabric.util.transformPoint(point, canvas.viewportTransform);

  var clampedCenterX = clamp(center.x, xMin, xMax);
  var clampedCenterY = clamp(center.y, yMin, yMax);

  var diffX = clampedCenterX - center.x;
  var diffY = clampedCenterY - center.y;

  if (diffX != 0 || diffY != 0) {
    canvas.relativePan(new fabric.Point(diffX, diffY));
  }
}

Answer 4

    canvas.on('object:moving', (e) => {
        // 阻止对象移动到画布外面
        let padding = 0; // 内容距离画布的空白宽度，主动设置
        var obj = e.target;
        if (obj.currentHeight > obj.canvas.height - padding * 2 ||
            obj.currentWidth > obj.canvas.width - padding * 2) {
            return;
        }
        obj.setCoords();
        if (obj.getBoundingRect().top < padding || obj.getBoundingRect().left < padding) {
            obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
            obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
        }
        if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding || obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
            obj.top = Math.min(
                obj.top,
                obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding
            );
            obj.left = Math.min(
                obj.left,
                obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding
            );
        }
    });