To keep a single rectangle within the boundaries of the other, with the same angle?

With the help of some calculations, you can deduct the rectangle (call it target) to the limits of the other (let's call it targetBounds)?

The two rectangles are in the same coordinate system.

Rectangles can have different width and height, but the angle is always the same.

Target can be moved and scaled, but must not go beyond the boundaries targetBounds

If the angle is 0 then I have no problem to fix a target in bounds targetBounds
For example, if the moving target, its x or y less than targetBounds, the target I set x/y as targetBounds. When the angle is 0 - simple.
5c987b3ce003a928154268.jpeg

But when objects have an angle < 0 or > 0, then I can't lock the target within the boundaries of the targetBounds
5c98812ab2ee7148409288.jpeg

I created a sandbox with an example: https://codesandbox.io/s/k970vyv415

When you double-click on the image, create a red rectangle superimposed on the image. You can resize and move. If images the angle is 0 then the red rectangle is within the boundaries of the picture, but if picture first turn, and then open the crop, then it does not work correctly, it can be seen, when moving the red rectangle.

An example in the sandbox for vuejs + fabricjs, but all the code that is responsible for this task is src/canvas/addons/crop and there is only javascript (of course with fabricjs, but there certainly is not difficult and intuitive)
March 19th 20 at 08:25
0 answer

Find more questions by tags TrigonometryJavaScript