在Fabricjs中的背景文本中添加填充和边框半径

Question

是否有机会在Fabric JS背景文本上添加填充和边框半径，我希望看起来像是号召性用语按钮

JS

canvas = new fabric.Canvas('mainCanvas',
    backgroundColor: 'green'
)


text = new fabric.IText('hello world', 
    left: 200
    top: 100
    backgroundColor: "pink",
)
canvas.add(text)

HTML

<canvas id="mainCanvas" style="border:1px solid #aaa" width="600" height="300"></canvas> 

JSFIDDLE

Answer 1

我通过简单地对元素进行分组来解决问题，并在fabric.Rect我为边框半径添加了rx: 5和ry: 5。

所有代码JSFIDDLE

Answer 2

如果有人在寻找Textbox的解决方案，

这里是您可以尝试的另一种解决方案：https://github.com/fabricjs/fabric.js/issues/3731

var TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
  _renderBackground: function(ctx) {
    if (!this.backgroundColor) {
      return;
    }
    var dim = this._getNonTransformedDimensions();
    ctx.fillStyle = this.backgroundColor;

    ctx.fillRect(
      -dim.x / 2 - this.padding,
      -dim.y / 2 - this.padding,
      dim.x + this.padding * 2,
      dim.y + this.padding * 2
    );
    // if there is background color no other shadows
    // should be casted
    this._removeShadow(ctx);
  }
});

扩展基类并覆盖_renderBackground函数。

非常简单，对我来说很好！