How to set the zoom multiplier in the URL string of an IText object using FabricJS?-JS Tutorial-php.cn

How to set the zoom multiplier in the URL string of an IText object using FabricJS?

PHPz

Release： 2023-08-24 17:01:16

forward

1231 people have browsed it

如何使用 FabricJS 在 IText 对象的 URL 字符串中设置缩放倍数？

In this tutorial, we will learn how to set the zoom multiplier in the URL string of an IText object 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 set a scaling multiplier in the IText object's URL string using the multiplier property.

grammar

toDataURL({ multiplier: Number }: Object): String

Copy after login

parameter

Options (optional) - This parameter is an object that provides additional customization for the URL representation of the IText object. Height, quality, format and many other properties can be changed using this parameter, where the multiplier is the property.

Option key

multiplier - This property accepts a Number value that represents the multiplier by which the final IText output image will be scaled. The default value is 1.

Example 1

Do not use the multiplier attribute

Let's look at a code example to see the output image when the multiplier attribute is not used. Once we open the console from the development tools, we can see the URL representation of the IText object. We can copy the URL and paste it into the address bar of a new tab to see the final output. Since we are not using the multiplier attribute, the default multiplier value will be used, which is 1.

<!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>Without using the multiplier property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the image</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 a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 310,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

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

      // Using the toDataURL method
      console.log(itext.toDataURL());
   </script>
</body>
</html>

Copy after login

Example

Use the multiplier attribute

Let's look at a code example to see what the final output image of an IText object looks like when using the multiplier attribute. In this case, we passed it a value of 2. So the final image will be scaled twice in the x and y directions.

<!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 multiplier property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </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 a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 310,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

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

      // Using the toDataURL method
      console.log(itext.toDataURL({ multiplier: 2 }));
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to set the zoom multiplier in the URL string of an IText object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!