Fabricjs使用Group实现组合对象

场景

Fabricjs一个简单强大的Canvas绘图库快速入门：

Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上，可以实现在画布上添加对象，如果需要组合对象，并设置组合对象的功能属性可以

使用new fabric.Group():接受两个参数。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、官方教程

Introduction to Fabric.js. Part 3. — Fabric.js Javascript Canvas Library

2、绘制圆形、绘制文本并组合

      //绘制圆形
      var circle = new fabric.Circle({
        radius: 100,
        fill: '#f00',
        scaleY: 0.5,
        originX: 'center', //调整中心点的X轴坐标
        originY: 'center' //调整中心点的Y轴坐标
      });
      //绘制文本
      var text = new fabric.Text('公众号:霸道的程序猿', {
        fontSize: 20,
        originX: 'center',
        originY: 'center'
      })
      //进行组合
      var group = new fabric.Group([circle, text], {
        left: 350,
        top: 200,
        angle: 10
      })
      canvas.add(group);

3、完整示例代码