📅 最后修改于: 2023-12-03 14:41:07.570000 🧑 作者: Mango
Fabric.js是一个基于HTML5 Canvas的开源JavaScript库，用于创建丰富，可交互的图形和动画。其中矩形是最基本的图形之一，在Fabric.js中，我们可以使用矩形对象来创建矩形，同时也可以通过设置矩形的左侧属性（left）来控制矩形在画布中的位置。
在Fabric.js中，我们可以通过以下代码创建一个矩形对象：
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 50,
height: 50
});
canvas.add(rect);
以上代码会创建一个左侧位置为100像素，顶部位置为100像素，颜色为红色，宽度和高度均为50像素的矩形，并将其添加到画布中。
矩形对象的左侧属性(left)用于控制矩形在画布中的位置。例如，如果我们要将矩形向右移动100像素，可以使用以下代码：
rect.set({ left: rect.left + 100 });
canvas.renderAll();
以上代码会将矩形对象的左侧位置加上100像素，并重新渲染画布。注意，必须调用canvas.renderAll()方法才能使更改生效。
以下示例展示了如何创建一个可以在画布中移动的矩形对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fabric.js | 矩形左属性</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 50,
height: 50
});
canvas.add(rect);
setInterval(function() {
rect.set({ left: rect.left + 1 });
canvas.renderAll();
}, 10);
</script>
</body>
</html>
以上代码会创建一个宽高均为50像素，颜色为红色，起始位置为左侧100像素，顶部100像素的矩形，并以每10毫秒的速度向右移动1像素。
通过设置矩形对象的左侧属性(left)，我们可以轻松地控制矩形在画布中的位置。Fabric.js提供了丰富的API和示例，使得我们可以轻松地创建丰富多样的图形和动画。