Fabric.js - 详细使用教程3（组合多个图形）
作者：hangge | 2020-03-01 08:06
三、组合多个图形
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>
全部评论（0）