fabric.js 创建一个可编辑标签的矩形
时间: 2023-12-22 16:10:47 浏览: 32
以下是使用Fabric.js创建一个可编辑标签的矩形的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fabric.js Editable Rectangle Label</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 创建Canvas对象
var canvas = new fabric.Canvas('canvas');
// 创建矩形对象
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 50,
fill: '#ccc'
});
// 创建文本对象
var text = new fabric.IText('Edit me', {
left: rect.left + 5,
top: rect.top + 5,
fill: '#000',
fontSize: 16,
fontFamily: 'Arial',
editable: true // 设置文本可编辑
});
// 将矩形和文本添加到Canvas
canvas.add(rect, text);
// 监听文本编辑事件
text.on('editing:exited', function() {
// 更新文本位置
text.set({
left: rect.left + 5,
top: rect.top + 5
});
canvas.renderAll();
});
</script>
</body>
</html>
```
在这个示例中,我们创建了一个矩形对象和一个文本对象,并将它们添加到Canvas中。我们将文本的editable属性设置为true,使其成为可编辑的文本框。我们还监听了文本的editing:exited事件,在文本编辑完成后更新文本的位置。
你可以在Canvas中拖动矩形和文本,双击文本进行编辑。编辑完成后,文本会自动更新位置并重新渲染到Canvas上。