Set object drag limit in Fabric.js

Question

i am new in fabric js want to set the drag limit

i have also try with https://

Answer 1

I used Michael Johnston's snipped as a starting point to add bounding control for rotated elements. This snipped only covers the cases when either (obj.centerX && obj.centerY == "center") || (obj.centerX && obj.centerY != "center")

canvasRef.current.on("object:moving", function (e) {
      var obj = e.target;
      var canvas = obj.canvas;
      var zoom = canvas.getZoom();
      var pan_x = canvas.viewportTransform[4];
      var pan_y = canvas.viewportTransform[5];

      // get left, top, width, and height of object
      var left = obj.left;
      var top = obj.top;
      var width = obj.width * obj.scaleX;
      var height = obj.height * obj.scaleY;

      // width & height we are constraining to must be calculated by applying the inverse of the current viewportTransform
      var c_width = canvas.width / zoom;
      var c_height = canvas.height / zoom;

      // calculate values that define the origin of the object, when it is centered in the center or not
      var left_adjust, right_adjust;
      if (obj.originX == "center") {
        left_adjust = right_adjust = width / 2;
      } else {
        left_adjust = 0;
        right_adjust = width;
      }
      var top_adjust, bottom_adjust;
      if (obj.originY == "center") {
        top_adjust = bottom_adjust = height / 2;
      } else {
        top_adjust = 0;
        bottom_adjust = height;
      }

      // support for rotated objects
      if (obj.angle) {
        var angle = obj.angle;
        if (angle > 270) {
          angle -= 270;
        } else if (angle > 180) {
          angle -= 180;
        } else if (angle > 90) {
          angle -= 90;
        }
        const radians = angle * (Math.PI / 180);
        const w_opposite = width * Math.sin(radians);
        const w_adjacent = width * Math.cos(radians);
        const h_opposite = height * Math.sin(radians);
        const h_adjacent = height * Math.cos(radians);

        if (obj.originX != "center" && obj.originY != "center") {
          if (obj.angle <= 90) {
            left_adjust = h_opposite;
            top_adjust = 0;
            right_adjust = w_adjacent;
            bottom_adjust = h_adjacent + w_opposite;
          } else if (obj.angle > 90 && obj.angle <= 180) {
            left_adjust = h_adjacent + w_opposite;
            top_adjust = h_opposite;
            right_adjust = 0;
            bottom_adjust = w_adjacent;
          } else if (obj.angle > 180 && obj.angle <= 270) {
            left_adjust = w_adjacent;
            top_adjust = w_opposite + h_adjacent;
            right_adjust = h_opposite;
            bottom_adjust = 0;
          } else {
            left_adjust = 0;
            top_adjust = w_adjacent;
            right_adjust = w_opposite + h_adjacent;
            bottom_adjust = h_opposite;
          }
        }

        if (obj.originX == "center" && obj.originY == "center") {
          if (obj.angle <= 90 || (obj.angle > 180 && obj.angle <= 270)) {
            left_adjust = (w_adjacent + h_opposite) / 2;
            right_adjust = (w_adjacent + h_opposite) / 2;
            top_adjust = (h_adjacent + w_opposite) / 2;
            bottom_adjust = (h_adjacent + w_opposite) / 2;
          } else {
            left_adjust = (h_adjacent + w_opposite) / 2;
            right_adjust = (h_adjacent + w_opposite) / 2;
            top_adjust = (w_adjacent + h_opposite) / 2;
            bottom_adjust = (w_adjacent + h_opposite) / 2;
          }
        }
      }

      // if you need margins set them here
      var top_margin = 0;
      var bottom_margin = 0;
      var left_margin = 0;
      var right_margin = 0;

      var top_bound = top_margin + top_adjust - pan_y;
      var bottom_bound = c_height - bottom_adjust - bottom_margin - pan_y;
      var left_bound = left_margin + left_adjust - pan_x;
      var right_bound = c_width - right_adjust - right_margin - pan_x;

      if (width > c_width) {
        obj.set("left", left_bound);
      } else {
        obj.set("left", Math.min(Math.max(left, left_bound), right_bound));
      }

      if (height > c_height) {
        obj.set("top", top_bound);
      } else {
        obj.set("top", Math.min(Math.max(top, top_bound), bottom_bound));
      }
});