使用渐变织物 Js 设置文本背景颜色答案

【问题标题】：Setting Text Background Color with Gradient Fabric Js使用渐变织物 Js 设置文本背景颜色
【发布时间】：2020-10-17 18:01:05
【问题描述】：

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

是否可以以某种方式为文本的背景颜色设置线性渐变？
是否可以在文本部分的背景色中添加一些填充

感谢您的回答！

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案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>

【讨论】：

您好，感谢您的回答！是的，这行得通，唯一的问题是，如果我选择它，我仍然希望能够编辑文本，但现在在选择时我正在选择一组元素并且无法选择和编辑文本字段
为此你需要做一些操作，当你选择一个组时，你会得到所有的组元素，你可以编写代码来获取所选组中的文本元素并进行编辑。跨度>

【解决方案2】：

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

背景为 abdulmoeez 答案的组矩形
然后观察该组是否被选中，如果被选中，取消组合并将选定元素设置为文本，使其可编辑。
如果用户已经完成了文本的编辑，用合适的边框重新渲染它并重新组合

【讨论】：