是否有机会在 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>
最佳答案
我通过简单地将元素分组并在 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>
关于javascript - 在 Fabricjs 的背景文本中添加填充和边框半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35888660/