How to make sure image alway include entire clipping Rect inside while it's transforming (move, scale) in fabric.js?

Question

I have a Image with a simple clipping Rect ( rotate 30 degree with size 200x200 to make a small view part of image ). My problem is how to prevent Image move or scale outside clipping rect ( that mean Image need alway include entire clipping Rect )?

Here is my code:

 var canvasObject = document.getElementById("editorCanvas"); // set canvas equal size with div $(canvasObject).width($("#canvasContainer").width()); $(canvasObject).height($("#canvasContainer").height()); var canvas = new fabric.Canvas('editorCanvas', { backgroundColor: 'white', selectionLineWidth: 2, width: $("#canvasContainer").width(), height: $("#canvasContainer").height() }); // create a clipping path var rectClippingPath = new fabric.Rect({ top: 100, left: 200, width: 200, height: 200, fill: 'red', angle: 30, absolutePositioned: true }); // create image var newImage = new fabric.Image(); newImage.clipPath = rectClippingPath; canvas.add(newImage); newImage.setSrc('http://fabricjs.com/assets/pug_small.jpg', (imageObject) => { newImage.set({ left: 50, top: 50}); canvas.setActiveObject(newImage); newImage.setCoords(); canvas.requestRenderAll(); })

 #canvasContainer { width: 100%; height: 100vh; background-color: gray; }

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js" integrity="sha512-XcwgBTqf2CXR/nsswCV1e0j9CjXo87APyBsATK2/l7MvTpcIG0QYKA87v5KIJ4RS6ytArv2pWD6UcRorKhYp1A==" crossorigin="anonymous"></script> <div id="canvasContainer"> <canvas id="editorCanvas"></canvas> </div>

And here are some example cases:

Here is expected result:

Thank you!

Answer 1

I can't see a way to achieve it based on your example. I think it needs a structural change. You can do it by having a parent element with all controls and then a child element (image object).

Whenever you move the parent frame you should force the photo to move by the same amount, whenever you scale the frame you should also proportionally scale the child photo, same with rotation.

Let's say you rotate the parent frame, now in order to manipulate the photo inside you will need some kind of activating trigger: double click or a button. That will make sure you are not moving the parent frame, but the child.

While you move the child photo you will need to force it to stay contained within the parent frame borders. This is not hard if both elements have a rotation of 0, 90, 180, 270, 360 degrees. It is much harder to make it nice and smooth for all other rotation angles. You can find a working, but not perfect solution here: Contain a rotated object inside another rotated object FabricJS . I also started working on a smoother solution for that, but it is not completed https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-v3-j38sz .

Implementing this solution you will most probably encounter also an issue having with rotating. It's easy to rotate an child image and the parent if they have the same origin point, but if you move the child and try to rotate the parent, then you will need to rotate them considering a different origin point. Here is a solution to this: https://codesandbox.io/s/rotation-of-an-object-with-different-rotation-origin-fabric-js-362-8m4cb?file=/src/index.js

You can also visit this platform and have look at similar ideas https://diamondphoto.co.nz/ . It is build in Fabric JS version 3.