Html5 canvas 如何确保图像始终包含整个剪辑矩形，而它'；是否在fabric.js中转换（移动、缩放）？

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

这是我的代码：

var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.height（$（“#canvasContainer”）.height（）； var canvas=new fabric.canvas（'editorCanvas'{ 背景颜色：“白色”， 选择线宽：2， 宽度：$（“#画布容器”）.width（）， 高度：$（“#画布容器”）。高度（） }); //创建剪切路径 var rectClippingPath=new fabric.Rect({ 前100名， 左:200,， 宽度：200， 身高：200， 填充：“红色”， 角度：30， 绝对正确 }); //创造形象 var newImage=newfabric.Image（）； newImage.clipPath=rectClippingPath； canvas.add（newImage）； newImage.setSrc（'http://fabricjs.com/assets/pug_small.jpg“，（图像对象）=>{ set（{left:50，top:50}）； canvas.setActiveObject（newImage）； newImage.setCoords（）； canvas.requestRenderal（）； })

#画布容器{
宽度：100%；
高度：100vh；
背景颜色：灰色；
}

---

根据您的示例，我看不到实现它的方法。我认为它需要一个结构性的改变。您可以通过拥有一个包含所有控件的父元素，然后是一个子元素（图像对象）来实现这一点

无论何时移动父帧，都应强制照片移动相同的量；无论何时缩放帧，都应按比例缩放子照片，旋转时也是如此

假设您旋转父帧，现在为了操纵内部的照片，您需要某种激活触发器：双击或按钮。这将确保您移动的不是父帧，而是子帧

移动子照片时，需要强制其保持在父帧边框内。如果两个元素都旋转0、90、180、270或360度，这并不困难。对于所有其他旋转角度来说，要使其美观和平滑要困难得多。您可以在此处找到一个可行但并非完美的解决方案：。我也开始研究一个更平滑的解决方案，但还没有完成

在实施此解决方案时，您很可能还会遇到与轮换相关的问题。如果子图像和父图像具有相同的原点，则可以轻松旋转它们，但如果移动子图像并尝试旋转父图像，则需要考虑到不同的原点来旋转它们。以下是一个解决方案：

---

你也可以访问这个平台，看看类似的想法。这是Fabric JS版本3中的内置版本。

我恐怕有点不清楚您想要实现什么（至少我没有实现）。你能给你的问题添点趣味吗？例如，画一幅它应该是什么样子的草图？@mounder，我为预期结果和错误结果添加了一张图片。你有办法解决这个问题吗？非常感谢。