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

时间:2016-03-09 10:15:04

标签: javascript coffeescript fabricjs

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

enter image description here

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

2 个答案:

答案 0 :(得分:1)

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

所有代码JSFIDDLE

答案 1 :(得分:0)

如果有人在寻找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函数。

非常简单,对我来说很好!