Fabric.js 可选矩形属性
在本文中,我们将看到如何设置可选属性,以便使用 FabricJS 编辑画布上的矩形对象。画布中的矩形可移动,并可以根据需求进行拉伸。此外,当涉及到初始描边颜色、高度、宽度、填充颜色或描边宽度时,可以自定义矩形。
为了实现这一点,我们将使用一个名为 FabricJS 的JavaScript库。在导入库之后,我们将在body标签中创建一个包含矩形的画布块。然后,我们将初始化由 FabricJS 提供的Canvas和Rectangle实例,并使用 selectable 属性将canvas矩形的可选性设置为选择画布对象,并根据下面的示例在Canvas上渲染Rectangle。
语法:
fabric.Rect({
width: number,
height: number,
selectable: Boolean
});
参数:
该函数接受三个参数,如上所述,并如下所述:
- width: 它指定了矩形的宽度。
- height: 它指定了矩形的高度。
- selectable: 它指定对象是否可被选中。
示例:
该示例使用FabricJS的selectable属性创建不可选中的画布矩形对象。
<!DOCTYPE html>
<html>
<head>
<title>
Fabric.js Rect selectable Property
</title>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js Rect selectable Property
</b>
</center>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a Rect instance
var rectangle = new fabric.Rect({
width: 200,
height: 100,
fill: '',
stroke: 'green',
strokeWidth: 3,
selectable: false
});
// Render the Rect in canvas
canvas.add(rectangle);
canvas.centerObject(rectangle);
</script>
</body>
</html>
输出: