fabric.js 创建一个可编辑标签的矩形,并将他们组合在一起
时间: 2024-02-19 16:59:08 浏览: 20
以下是使用Fabric.js创建一个可编辑标签的矩形,并将他们组合在一起的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fabric.js Editable Rectangle Label with Grouping</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);
// 将矩形和文本组合在一起
var group = new fabric.Group([rect, text], {
left: 100,
top: 100,
selectable: true // 可选中
});
// 将组添加到Canvas
canvas.add(group);
// 监听文本编辑事件
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上。