如何确保图像在fabric.js中转换移动，缩放时始终将整个裁剪Rect包含在其中？

如何解决如何确保图像在fabric.js中转换移动，缩放时始终将整个裁剪Rect包含在其中？

我有一个带有简单裁剪矩形的图像（将200x200大小旋转30度以使图像的一部分成为小视图）。我的问题是如何防止图像在裁剪矩形外部移动或缩放（这意味着图像始终需要包括整个裁剪Rect）？

这是我的代码：

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>

以下是一些示例案例：

这是预期的结果：

谢谢！

解决方法

根据您的示例，我看不到实现它的方法。我认为这需要结构上的改变。您可以通过使父元素具有所有控件，然后使子元素（图像对象）成为可能。

每当移动父框架时，都应迫使照片移动相同的量，每当缩放框架时，还应按比例缩放子照片，并且旋转相同。

比方说，您旋转父框架，现在要操纵内部的照片，您将需要某种激活触发器：双击或按钮。这样可以确保您不会移动父框架，而是移动子框架。

在移动子照片时，您需要强制其保留在父框架边界内。如果两个元素的旋转角度分别为0、90、180、270、360度，这并不难。要使其在所有其他旋转角度上都保持平滑美观，要困难得多。您可以在这里找到可行但并非完美的解决方案：Contain a rotated object inside another rotated object FabricJS。我还开始为此目的开发一种更平滑的解决方案，但尚未完成https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-v3-j38sz。

实施此解决方案，您很可能还会遇到旋转问题。如果子图像和父图像具有相同的原点，旋转它们很容易，但是如果移动子图像并尝试旋转父图像，则需要考虑不同的原点来旋转它们。这是一个解决方案：https://codesandbox.io/s/rotation-of-an-object-with-different-rotation-origin-fabric-js-362-8m4cb?file=/src/index.js

您还可以访问此平台并查看类似的想法https://diamondphoto.co.nz/。它是在Fabric JS版本3中构建的。