Fabric.js Group backgroundColor属性
在本文中,我们将看到如何使用 Fabric.js 设置 Group canvas 的 backgroundColor。Fabric.js 中的 Group 可以根据需求移动和拉伸。此外,当涉及到初始描边颜色,高度,宽度,填充颜色或描边宽度时,Group 可以自定义。
方法: 为了实现这一目标,我们将使用一个叫做 Fabric.js 的 JavaScript 库。在导入库之后,我们将在 body 标签中创建一个包含 Group 的 canvas 块。然后,我们将初始化由 Fabric.js 提供的 Canvas 和 Group 的实例,并使用 backgroundColor 属性来更改画布 Group 的背景颜色。
语法:
fabric.Group([canvas1, canvas2], {
backgroundColor: String
});
参数: 此属性接受一个单一参数,如上所述并如下所述:
- backgroundColor: 它是一个字符串,用于指定背景颜色。
以下示例说明了在JavaScript中使用Fabric.js群组 backgroundColor 属性的用法:
示例:
<!DOCTYPE html>
<html>
<head>
<!-- FabricJS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 400px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Group backgroundColor Property
</b>
</div>
<div style="text-align: center;">
<canvas id="canvas" width="500" height="300"
style="border:1px solid green;">
</canvas>
</div>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a circle instance
var circle = new fabric.Circle({
radius: 100,
fill: 'lightgreen',
scaleY: 0.6,
originX: 'center',
originY: 'center',
backgroundColor: 'red'
});
// Initiate a text instance
var text = new fabric.Text('GeeksforGeeks', {
fontSize: 25,
originX: 'center',
originY: 'center'
});
// Initiate a Group instance
var group = new fabric.Group([ circle, text ], {
backgroundColor: 'red'
});
// Render the Group in canvas
canvas.add(group);
// Center the Group in canvas
canvas.centerObject(group);
</script>
</body>
</html>
输出结果: