How to remove current object cast from URL string of IText object using FabricJS?-JS Tutorial-php.cn

How to remove current object cast from URL string of IText object using FabricJS?

王林

Release： 2023-09-13 19:09:04

forward

1248 people have browsed it

如何使用 FabricJS 删除 IText 对象的 URL 字符串中的当前对象转换？

In this tutorial, we will learn how to remove the current object transformation (scale, angle, flip, skew) from 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. Similarly, we can use the withoutTransform property to remove the transform of the current object in the URL string of the IText object.

grammar

toDataURL({ withoutTransform: Boolean }: 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 withoutTransform is a property.

Option key

withoutTransform - This property accepts a Boolean value which allows us to get rid of the current object transformation. By passing it a true value, there will be no scale, angle, flip, or tilt in the final output image.

Example 1

Use the withoutTransform attribute and pass it a false value

Let's look at a code example to see the output image when passing a false value to the withoutTransform property. 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. In this example, we pass the IText object a scaleY property that specifies the vertical scale factor. So our output will be scaled vertically. However, since we also passed a false value to the withoutTransform property, our final output image will still contain the scaleY property.

<!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 withoutTransform property and passing it a false value</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 final image contains vertical scaling </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: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
            scaleY: 2,
         }
      );

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

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

Copy after login

Example 2

Use the withoutTransform attribute and pass it a true value

Let's look at a code example to see what the final output image of an IText object looks like when using the withoutTransform property and passing a true value to it. In this case, our final output image will not contain any object transformations.

<!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 withoutTransform property and passing it a true value</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 final image does not contain vertical scaling </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: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
            scaleY: 2,
         }
      );

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

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

Copy after login

The above is the detailed content of How to remove current object cast from URL string of IText object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!