Prevent Image Movement Beyond Boundaries of a White SVG Shape in Fabric.js

[Arkit-Sutariya]

I am using Fabric.js 6.3.0 and have implemented functionality to restrict an image object's movement within the boundaries of a white SVG shape on the canvas. The requirement is to ensure that the image cannot cross the boundaries of the white SVG shape, but it should still allow movement in directions that remain within the shape's bounds. For instance:

• If the image object's left side exceeds the left boundary of the white SVG shape, movement to the left should be restricted, but right-side movement should remain functional.
  - Similarly, if the image is moved toward the bottom and exceeds the shape's lower boundary, downward movement should be restricted, but upward movement should still work.

To achieve this, I tried to use the getBoundingRect() data to adjust the left property of the image object dynamically. However, this approach caused a continuous blinking effect during the movement, which negatively impacts the user experience.

I have provided my implementation in the following CodeSandbox link:

I would greatly appreciate a solution or reference that effectively resolves this issue without causing visual glitches like blinking.

[asturur]

        img.on("moving", (e) => {
          const imgBounds = img.getBoundingRect();
          const shapeBounds = shape.getBoundingRect();
          img.setCoords();

          // get left-top corner of image:
          const p = img.translateToOriginPoint(
            img.getRelativeCenterPoint(),
            'left',
            'top',
          );

          if (p.x > shapeBounds.left) {
            img.setPositionByOrigin(new fabric.Point(shapeBounds.left, p.y), 'left', 'top');
          }
        });

This doesn't flicker in the sandbox for me and is how i have been doing this kind of things in the past

[Arkit-Sutariya]

@asturur

Thank you for your solution.

However, could you please check again? When I rotate the image and then move the object, I am unable to move it perfectly. I need a solution that works for both rotated and non-rotated objects. Could you provide a solution that accounts for rotation as well?