是否有机会在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>
答案 0 :(得分:1)
我通过简单地对元素进行分组来解决问题,并在fabric.Rect
我为边框半径添加了rx: 5
和ry: 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
函数。
非常简单,对我来说很好!