Fabric.js矩形宽高修改后填充图案适配问题求助

我之前也碰到过一模一样的情况，Fabric.js里的图案填充（fabric.Pattern）可不是直接跟着源图片尺寸走的，你直接改rect.fill.source.width这类属性根本不会生效——因为Pattern对象在创建时就已经基于源图片生成了内部的渲染数据，单纯改源的尺寸触发不了任何更新。下面给你两种实用的解决办法：

方法一：重新创建Pattern对象（适合非重复/精确匹配尺寸的场景） #

这种方式直接用矩形的新尺寸生成全新的Pattern，替换掉原来的填充，能确保图案完全贴合新的矩形大小：

// 先修改矩形的宽高
rect.setWidth(width_h);
rect.setHeight(height_v);

// 检查当前填充是否为Pattern类型
if (rect.fill instanceof fabric.Pattern) {
  // 获取原始的图片源
  const originalImage = rect.fill.source;
  // 创建新的Pattern实例，设置宽高为矩形的新尺寸
  const updatedPattern = new fabric.Pattern({
    source: originalImage,
    repeat: 'no-repeat', // 可根据需求改成'repeat'/'repeat-x'/'repeat-y'
    width: width_h,
    height: height_v
  });
  // 给矩形设置新的填充图案
  rect.set('fill', updatedPattern);
}

// 更新矩形位置并重新计算坐标
rect.setLeft(width_h);
rect.setTop(height_v);
rect.setCoords();
// 重新渲染画布
canvas.renderAll();

方法二：调整Pattern的缩放比例（适合重复填充的场景） #

如果你的填充是需要重复的图案，没必要重新创建Pattern，只需要计算缩放比例，让图案适配新的矩形尺寸即可：

rect.setWidth(width_h);
rect.setHeight(height_v);

if (rect.fill instanceof fabric.Pattern) {
  // 计算缩放比例：矩形新尺寸 / 图案原始尺寸
  const scaleX = width_h / rect.fill.source.width;
  const scaleY = height_v / rect.fill.source.height;
  // 更新Pattern的缩放属性
  rect.fill.scaleX = scaleX;
  rect.fill.scaleY = scaleY;
  // 触发Pattern的重新初始化，让缩放生效
  rect.fill._initPattern();
}

rect.setLeft(width_h);
rect.setTop(height_v);
rect.setCoords();
canvas.renderAll();

注意事项 #

• 一定要先判断rect.fill是不是fabric.Pattern实例，避免非图案填充时出现报错；
• 如果你的图案源是外部加载的图片，要确保图片已经完全加载完成再执行这些操作，否则可能获取不到正确的尺寸；
• 两种方法的选择看你的需求：如果需要图案刚好覆盖整个矩形（无重复），用方法一；如果需要图案重复填充且适配矩形比例，用方法二。

内容的提问来源于stack exchange，提问作者Michael Tsipes