如何解决使用渐变织物Js设置文本背景颜色
我正在尝试为Fabric.js中的IText对象设置背景颜色,并且遇到了两个问题:
- 是否可以通过某种方式将线性渐变设置为文本的Backgroundcolor?
- 是否有可能在文本的背景色部分加上填充
感谢您的回答!
解决方法
我很确定您的要求是不可能的,在他们的文档中没有提到,这是您遇到的问题的替代方法 除了为文本添加背景之外,您还可以创建一个矩形对象并添加渐变填充,可以参考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>
,
适用于我并允许编辑文本的解决方案如下
- 与abdulmoeez答案中的具有背景的矩形组
- 然后监视是否选中了该组,如果选中了该组,则将其取消分组并将所选元素设置为文本,以便可编辑。
- 如果用户已完成文本的编辑,请使用合适的边框重新渲染并重新分组
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。