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

编程问答 2022-08-16

问题描述

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

    @H_502_3@是否可以通过某种方式将线性渐变设置为文本的Backgroundcolor？ @H_502_3@是否有可能在文本的背景色部分加上填充

感谢您的回答！

解决方法

我很确定您的要求是不可能的，在他们的文档中没有提到，这是您遇到的问题的替代方法 除了为文本添加背景之外，您还可以创建一个矩形对象并添加渐变填充，可以参考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>

,

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

  1. 与abdulmoeez答案中的具有背景的矩形组
  2. 然后监视是否选中了该组，如果选中了该组，则将其取消分组并将所选元素设置为文本，以便可编辑。
  3. 如果用户已完成文本的编辑，请使用合适的边框重新渲染并重新分组
fabricjshtml5-canvasjavascript