javascript - 在 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

var canvas = window._canvas = new fabric.Canvas('c1');




var bg = new fabric.Rect({
  fill: '#32b775',
  scaleY: 0.5,
  originX: 'center',
  originY: 'center',
  rx: 5, 
  ry: 5,
  width: 90,
  height:80
});

var text = new fabric.Text('Done', {
  fontSize: 18,
  originX: 'center',
  originY: 'center',
  fill: '#FFF'
});

var group = new fabric.Group([ bg, text ], {
  left: 50,
  top: 100
});

canvas.add(group);

canvas {
    border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>

<canvas id="c1" width="300" height="300"></canvas>