当前位置: > > > Fabric.js - 详细使用教程3(组合多个图形)

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>
评论0