How to vertically center an object relative to the current viewport of the canvas in IText using FabricJS?-JS Tutorial-php.cn

How to vertically center an object relative to the current viewport of the canvas in IText using FabricJS?

王林

Release： 2023-08-24 10:21:10

forward

1403 people have browsed it

如何使用 FabricJS 将对象相对于 IText 中画布的当前视口垂直居中？

In this tutorial, we will learn how to vertically center an object relative to the current viewport of a canvas in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can use the viewportCenterV method to vertically center an object relative to the current viewport of the canvas.

grammar

viewportCenterV(): fabric.Object

Copy after login

Example 1

Default appearance of IText objects

Let's look at a code example to see what an IText object looks like without using the viewportCenterV method. In this case, the itext object will not be vertically centered on the canvas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default appearance of the IText object</h2>
   <p>You can see that the itext object has not been centered vertically withrespect to the current viewport of canvas</p>
   <canvas id="canvas"></canvas>
   
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Copy after login

Example 2

Use viewportCenterV method

Let's look at a code example to see what an IText object looks like when using the viewportCenterV method. In this case, our IText object will be centered relative to the current viewport of the canvas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the viewportCenterV method</h2>
   <p>You can see that the itext object has been centered vertically with respect to the current viewport of canvas</p>
   <canvas id="canvas"></canvas>
   
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using the viewportCenterV method
      itext.viewportCenterV();
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to vertically center an object relative to the current viewport of the canvas in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!