将旋转的对象包含在另一个旋转的对象FabricJS中

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Adam M.想要引起更多关注对此问题。

我有两个对象，一个父对象（红色）和一个子对象（蓝色）。父对象无法移动，只有子对象是可移动的，并且子对象始终大于父对象。无论以何种方式移动子对象，它都应始终包含在子对象中，这意味着我们永远都不会看到红色矩形。

演示：https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-7nt7q

我知道有一种解决方案可以将对象包含在画布或其他对象边界（例如Move object within canvas boundary limit）中，这些方法主要会强制顶部/右侧/底部/左侧值不超过父级值，但是这里我们有如果两个旋转的对象具有相同的度数]]。

当用户将照片上传到相框容器时，我有一个真实的场景。照片通常总是大于相框容器。用户可以在框架内移动照片，但不应允许他创建任何空白空间，照片应始终包含在框架内。

我有两个对象，一个父对象（红色）和一个子对象（蓝色）。父对象无法移动，只有子对象是可移动的，并且子对象始终大于父对象。子...

Answer 1

您可以只在其中包含Class的情况下创建新的object，而仅对parent的children执行所有操作，就像这样：