0



我有一个带有简单剪裁 Rect 的图像（旋转 30 度，大小为 200x200 以制作图像的小视图部分）。我的问题是如何防止 Image 在剪裁矩形之外移动或缩放（这意味着 Image 需要始终包含整个剪裁 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>



以下是一些示例： 这是预期结果： 谢谢！
在此处输入图像描述

在此处输入图像描述

4

1 回答 1

0

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

每当您移动父框架时，您应该强制照片移动相同的量，每当您缩放框架时，您还应该按比例缩放子照片，与旋转相同。

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

当您移动子照片时，您需要强制它保持在父框架边界内。如果两个元素都有 0、90、180、270、360 度的旋转，这并不难。对于所有其他旋转角度来说，让它变得漂亮和平滑要困难得多。您可以在这里找到一个可行但不完美的解决方案：在另一个旋转对象 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 中构建的。

于 2020-09-15T04:41:55.907 回答