Angular 5中无法将图片添加至FabricJS Canvas组的问题求助

我来帮你搞定这个Fabric.js里图片作为组背景不显示的问题！根据你的描述，核心问题大概率是组内对象的堆叠顺序或者图片与矩形的坐标/尺寸未对齐导致的——毕竟Fabric.js的组内对象是按添加顺序堆叠的，后加的会盖在前面的对象上；如果你的透明矩形先加入了组，之后再加图片，哪怕矩形填充透明，它的占位也会挡住下方的图片。

下面给你几个针对性的解决方案：

方案1：调整组内对象的添加顺序（最直接） #

确保图片是第一个被加入组的对象，之后再添加矩形和文本，这样图片就会自然成为最底层的背景：

fabric.Image.fromURL(url, oImg => {
  oImg.set({
    left: this.convertor.ToPixels(this.shape.origin.x, this.units),
    top: this.convertor.ToPixels(this.shape.origin.y, this.units),
    width: this.shapeElement.width,
    height: this.shapeElement.height
  });
  this.imageElement = oImg;
  
  // 第一步：把图片加入组（作为底层背景）
  group.add(this.imageElement);
  
  // 第二步：加入透明矩形（确保坐标尺寸和图片完全匹配）
  const bgRect = new fabric.Rect({
    left: oImg.left,
    top: oImg.top,
    width: oImg.width,
    height: oImg.height,
    fill: 'transparent',
    // 保留你原来的stroke设置（如果有的话）
    stroke: '#000',
    strokeWidth: 1
  });
  group.add(bgRect);
  
  // 第三步：加入文本对象（自动在最上层）
  const textObj = new fabric.Text('你的文本内容', {
    left: oImg.left + 15, // 调整到矩形内合适位置
    top: oImg.top + 15,
    fill: '#333'
  });
  group.add(textObj);
  
  // 最后把组加到画布
  this.canvas.fabric.add(group);
});

方案2：将图片设为矩形的填充（更优雅） #

不需要单独添加图片对象，直接把图片作为矩形的填充源，从根源避免图层冲突：

fabric.Image.fromURL(url, oImg => {
  // 创建带图片填充的矩形
  const bgRect = new fabric.Rect({
    left: this.convertor.ToPixels(this.shape.origin.x, this.units),
    top: this.convertor.ToPixels(this.shape.origin.y, this.units),
    width: this.shapeElement.width,
    height: this.shapeElement.height,
    // 用图片作为矩形填充
    fill: new fabric.Pattern({
      source: oImg.getElement(),
      repeat: 'no-repeat'
    }),
    // 保留原有的透明矩形样式
    stroke: '#000',
    strokeWidth: 1
  });
  
  // 创建文本对象
  const textObj = new fabric.Text('你的文本内容', {
    left: bgRect.left + 15,
    top: bgRect.top + 15,
    fill: '#333'
  });
  
  // 创建组并添加对象
  const group = new fabric.Group([bgRect, textObj], {
    left: bgRect.left,
    top: bgRect.top
  });
  
  this.canvas.fabric.add(group);
});

方案3：调整现有组内对象的堆叠顺序 #

如果你的组已经创建好且包含了矩形和文本，可以在添加图片后，把它发送到组的最底层：

fabric.Image.fromURL(url, oImg => {
  oImg.set({
    left: this.convertor.ToPixels(this.shape.origin.x, this.units),
    top: this.convertor.ToPixels(this.shape.origin.y, this.units),
    width: this.shapeElement.width,
    height: this.shapeElement.height
  });
  this.imageElement = oImg;
  
  group.add(this.imageElement);
  // 把图片发送到组的最底层
  group.sendToBack(this.imageElement);
  
  // 强制刷新画布确保生效
  this.canvas.fabric.renderAll();
});

额外注意事项 #

• 务必保证图片的left、top、width、height和矩形完全一致，避免图片偏移出矩形可视范围。
• 每次修改组内对象后，调用canvas.renderAll()确保画布刷新。

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