Fabric.js ActiveSelection viewportCenterV() 方法

在本文中，我们将看到如何使用FabricJS中的canvas ActiveSelection的viewportCenterV()方法，它用于填充对象。canvas ActiveSelection表示ActiveSelection是可移动的，并且可以根据需求进行拉伸。此外，ActiveSelection在初始描边颜色、高度、宽度、填充颜色或描边宽度方面可以进行自定义。

viewportCenterV()方法用于在当前对象的视口上垂直居中对象。

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

语法：

ActiveSelection.viewportCenterV()

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

返回值： 此方法返回一个包含垂直居中于当前视口的Centers对象的对象值。

示例： 此示例使用FabricJS将canvas ActiveSelection的viewportCenterV()方法设置为如下例所示：

<!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 viewportCenterV() 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.viewportCenterV()) 
  </script> 
</body> 
  
</html>

输出：

Fabric.js ActiveSelection viewportCenterV() 方法