Fabric.js: 为组分配背景颜色

Question

我正在尝试为组设置背景颜色而不影响其包含的对象。

到目前为止，我的代码如下所示：

var canvas = new fabric.Canvas('canvas');

var helloText = new fabric.Text('hello', {
  fontSize: 30,
  top: 10, left: 10,
  originX: 0, originY: 0
});

var worldText = new fabric.Text('world!', {
  fontSize: 40,
  top: 50, left: 100,
  originX: 0, originY: 0
});

var group = new fabric.Group([helloText, worldText], {
    selectionBackgroundColor: 'red',
    backgroundColor: 'blue'
});

canvas.add(group);

可以找到 jsFiddle 版本 here。

正如您从我的代码中看到的那样，我已经尝试了 backgroundColor 属性，但它只影响包含的对象。我想实现类似selectionBackgroundColor.

的效果

Answer 1

稍作调整，但这应该适合你（相关代码）：

var text = new fabric.Group([helloText, worldText], {});
var textBoundingRect = text.getBoundingRect();
var background = new fabric.Rect({
  top: textBoundingRect.top,
  left: textBoundingRect.left,
  width: textBoundingRect.width,
  height: textBoundingRect.height,
  fill: 'blue'
});
var group = new fabric.Group([background, text], {});

您的 JSFiddle 已更新，https://jsfiddle.net/rekrah/92ss3d86/。

Fabric.js: 为组分配背景颜色

Fabric.js: Assigning background color to group

javascript

grouping

background

colors

fabricjs