如何限制Fabric.js中图像变换时始终覆盖内部裁剪路径

我给图片加了一个旋转30度、尺寸200x200的矩形裁剪路径，用来显示图像局部区域。现在遇到的问题是：当对图像进行移动、缩放等变换操作时，裁剪路径内部会出现空白，我需要让图像始终完全覆盖裁剪路径的整个内部区域。

原实现代码如下：

// 创建裁剪路径
var rectClippingPath = new fabric.Rect({
  top: 100,
  left: 200,
  width: 200,
  height: 200,
  fill: 'red',
  angle: 30,
  absolutePositioned: true
});

// 创建图像
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();
})

核心思路是：由于你的裁剪路径是画布绝对定位的，所以需要确保图像在变换后始终覆盖裁剪路径的外接矩形区域（旋转后的矩形会有更大的外接范围）。我们可以通过监听图像变换事件，实时调整图像的位置和尺寸来实现。

修改后的代码如下：

// 创建裁剪路径
var rectClippingPath = new fabric.Rect({
  top: 100,
  left: 200,
  width: 200,
  height: 200,
  fill: 'red',
  angle: 30,
  absolutePositioned: true
});

// 创建图像
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();

  // 监听图像变换事件，每次变换后调整图像范围
  canvas.on('object:modified', function(e) {
    if (e.target === newImage) {
      // 获取裁剪路径的外接矩形（包含旋转后的完整范围）
      const clipBBox = rectClippingPath.getBoundingRect();
      const imgWidth = newImage.width;
      const imgHeight = newImage.height;
      const imgAspect = imgWidth / imgHeight;
      const clipAspect = clipBBox.width / clipBBox.height;

      let newImgWidth, newImgHeight;
      // 保持图像宽高比，计算能覆盖裁剪外接矩形的最小尺寸
      if (imgAspect > clipAspect) {
        newImgWidth = clipBBox.width;
        newImgHeight = newImgWidth / imgAspect;
        // 若高度不足，以高度为准重新计算
        if (newImgHeight < clipBBox.height) {
          newImgHeight = clipBBox.height;
          newImgWidth = newImgHeight * imgAspect;
        }
      } else {
        newImgHeight = clipBBox.height;
        newImgWidth = newImgHeight * imgAspect;
        // 若宽度不足，以宽度为准重新计算
        if (newImgWidth < clipBBox.width) {
          newImgWidth = clipBBox.width;
          newImgHeight = newImgWidth / imgAspect;
        }
      }

      // 调整图像位置，使其中心与裁剪外接矩形中心对齐
      newImage.set({
        width: newImgWidth,
        height: newImgHeight,
        left: clipBBox.left + (clipBBox.width - newImgWidth) / 2,
        top: clipBBox.top + (clipBBox.height - newImgHeight) / 2
      });

      newImage.setCoords();
      canvas.requestRenderAll();
    }
  });
});

关键逻辑说明 #

1. 监听变换事件：通过object:modified事件捕获图像的移动、缩放等操作完成后的时机
2. 计算外接矩形：用getBoundingRect()获取裁剪路径旋转后的完整外接范围，这是图像需要覆盖的最小区域
3. 保持宽高比调整尺寸：根据图像和裁剪区域的宽高比，计算能完全覆盖外接矩形的最小图像尺寸，避免拉伸变形
4. 对齐位置：将图像中心与裁剪外接矩形中心对齐，确保图像完全覆盖裁剪区域

这样设置后，无论怎么移动、缩放图像，裁剪路径内部都会被图像填满，不会出现空白。

内容的提问来源于stack exchange，提问作者菠萝吹雪