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

Question

我正在尝试将背景颜色设置为来自 Fabric.js 的 IText Object 并且遇到了两个问题：

1. 是否可以以某种方式将线性渐变设置为文本的背景颜色？
2. 是否可以在文本的背景色部分进行一些填充

感谢您的回答！

Answer 1

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

 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

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

1. 具有背景的组矩形，如 abdulmoeez 答案
2. 然后观察这个组是否被选中，如果被选中则取消分组并将所选元素设置为文本，以便它是可编辑的。
3. 如果用户已完成编辑文本，则使用合适的边框重新渲染它并重新组合