Fabric.js ActiveSelection toGroup() 方法

在本文中，我们将学习如何在canvas的ActiveSelection中使用toGroup()方法，该方法用于将一个对象填充。ActiveSelection表示可移动并可根据要求进行拉伸的选中项。此外，当涉及到初始描边颜色、高度、宽度、填充颜色或描边宽度时，还可以对ActiveSelection进行自定义设置。

toGroup() 方法用于将ActiveSelection变成一个普通的group。

操作方法： 首先导入fabric.js库。在导入库后，在body标签中创建一个包含ActiveSelection的canvas块。在此之后，初始化由Fabric.JS提供的Canvas和ActiveSelection类的实例，并使用toGroup()方法。

语法:

ActiveSelection.toGroup()

参数： 此函数不接受任何参数。

返回值： 此方法返回用于将activeSelection更改为普通组的对象值。

示例： 此示例使用FabricJS将画布的ActiveSelection的toGroup()方法设置为以下示例中所示：

<!DOCTYPE html> 
<html> 
  
<head> 
  <!-- FabricJS CDN -->
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
  </script> 
</head> 
  
<body> 
  <div style="text-align: center;width: 400px;"> 
    <h1 style="color: green;"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      Fabric.js | ActiveSelection toGroup() method 
    </b> 
  </div> 
  
  <div style="text-align: center;"> 
    <canvas id="canvas" width="500" height="500" 
            style="border:1px solid green;"> 
    </canvas> 
  </div> 
  
  <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"   
       width="100" height="100"
       id="my-image" style="display: none;"> 
  
  <script> 
    var canvas = new fabric.Canvas("canvas"); 
  
    // Getting the image  
    var img = document.getElementById('my-image'); 
  
    // Creating the image instance  
    var geek = new fabric.Image(img, { 
    }); 
  
    canvas.add(geek); 
  
    var geek = new fabric.IText('GeeksforGeeks', { 
    }); 
    canvas.add(geek); 
    canvas.centerObject(geek); 
  
    var gfg = new fabric.ActiveSelection( 
                canvas.getObjects(), { 
    }); 
  
    canvas.setActiveObject(gfg); 
    canvas.requestRenderAll(); 
    canvas.centerObject(gfg); 
    console.log(gfg.toGroup())  
  </script> 
</body> 
  
</html>

输出：

Fabric.js ActiveSelection toGroup() 方法