Fabric.js - 详细使用教程3(组合多个图形)
三、组合多个图形
1,效果图
我们将圆形对象和文字对象组合在一起,然后显示在画布中,同时对组合后的对象设置位置以及旋转角度。

2,样例代码
new fabric.Group() 可以用来组合多个对象,该方法接受两个参数:
- 第一个参数:要组合对象名称组成的数组
- 第二个参数:组合到一起的对象的共同属性。
<!DOCTYPE html> <html> <head> <style> canvas { border: 1px dashed black; } </style> <script src="fabric.min.js"></script> <script> window.onload = function() { var canvas = new fabric.Canvas('canvas'); //绘制圆形 var circle = new fabric.Circle({ radius: 100, fill: 'orange', scaleY: 0.5, originX: 'center',//调整中心点的X轴坐标 originY: 'center'//调整中心点的Y轴坐标 }); //绘制文本 var text = new fabric.Text('hangge.com', { fontSize: 30, fill: '#fff', originX: 'center', originY: 'center' }) //进行组合 var group = new fabric.Group([circle, text], { left: 50, top: 20, angle: 10 }) canvas.add(group); } </script> </head> <body> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>