Fabric.js组内使用scaleToWidth缩放时图片出现偏移问题

问题现象 #

使用Fabric.js 4.0.0-beta.6版本时存在如下异常：由矩形（Rect）背景、图片元素共同组成的Group组，在对组整体执行缩放操作后，组内图片的相对偏移会发生异常改变，与背景矩形位置出现错位。
预期效果：组缩放过程中，内部图片相对背景矩形的位置应保持固定，无相对位移。

复现代码 #

const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);

const bg = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
});

fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) {

  img.scaleToWidth(bg.width)
  const post = new fabric.Group([bg, img], {
    left: 100,
    top: 100,
  });

  post.scaleToWidth(400);
  canvas.add(post);
  canvas.renderAll();
});

问题原因 #

该异常属于Fabric.js 4.0.0-beta.6版本Group计算逻辑的已知问题：把子元素加入Group前，如果单独给子元素调用scaleToWidth/scaleToHeight设置了独立缩放属性，Group初始化时自动计算子元素相对偏移的过程不会正确纳入该部分缩放变换，后续组整体缩放时，子元素自身变换矩阵与组变换矩阵叠加就会出现位置计算偏差，最终表现为元素错位。

修复方案 #

可任选以下一种方式修复：

• 方案1：加入组前不要给子元素调用缩放方法，直接设置图片宽高匹配背景矩形，重置子元素缩放属性为1，避免独立缩放干扰组的矩阵计算

  fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) {
    // 直接设置图片尺寸，不调用scaleToWidth
    img.set({
      width: bg.width,
      height: bg.width * (img.height / img.width),
      scaleX: 1,
      scaleY: 1
    })
    const post = new fabric.Group([bg, img], {
      left: 100,
      top: 100,
    });
    post.scaleToWidth(400);
    canvas.add(post);
    canvas.renderAll();
  });
  

• 方案2：创建Group实例后，先调用setCoords()强制刷新组及所有子元素的坐标、变换计算结果，再执行组的缩放操作

  const post = new fabric.Group([bg, img], {
    left: 100,
    top: 100,
  });
  // 强制刷新变换计算
  post.setCoords();
  post.scaleToWidth(400);
  

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