使用Gradient Fabric Js设置文本背景颜色

Question

我正在尝试为来自 Fabric.js 的 IText 对象设置背景颜色，但遇到了两个问题：

是否可以通过某种方式为文本的背景颜色设置线性渐变？
是否可以在部分文本的背景颜色下填充一些内容

感谢您的回答！

Answer 1

我很确定你问的是不可能的，他们的文档中没有提到，这是你问题的替代方法您可以创建一个矩形对象并添加渐变填充，而不是向文本添加背景，您可以参考 fabric js 文档以获取有关渐变的更多信息 http://fabricjs.com/fabric-intro-part-2#gradients 然后您可以在矩形对象上添加文本，我添加了一个示例里面的填充将只是矩形的宽度和高度，您可以轻松调整它。

fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c1');


var text = new fabric.IText("Bharat\nasdsa\nasdasda\nnn\nklssd", {
    fontFamily: 'Courier New',
    left: 20,
    top: 20,
    fontSize: 26,
    fill: '#fff'
});

var rect = new fabric.Rect({
    width: 200,
    height: 200,
    fill: '#ffcc12',
    opacity: 1
});

rect.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: rect.width,
  y2: 0,
  colorStops: {
    0: "red",
    0.2: "orange",
    0.4: "yellow",
    0.6: "green",
    0.8: "blue",
    1: "purple"
  }
});

var group = new fabric.Group([rect, text]);
canvas.add(group);
canvas.centerObject(group);

canvas {
    border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js"></script>
<canvas id="c1" width="300" height="300"></canvas>

Answer 2

对我有用并允许编辑文本的解决方案如下

按照 abdulmoeez 的回答对矩形进行分组
然后观察这个组是否被选中，如果被选中un-group然后将选中的元素设置为文本，这样就可以编辑了。
如果用户完成了文本编辑，re-render 它会带有合适的边框并重新组合

使用Gradient Fabric Js设置文本背景颜色

Setting Text Background Color with Gradient Fabric Js

javascript

html5-canvas

fabricjs