search

Home  >  Article  >  Web Front-end  >  FabricJS - How to remove the current object cast from a Line object's URL string?

FabricJS - How to remove the current object cast from a Line object's URL string?

PHPz
PHPzforward
2023-08-27 20:05:09909browse

FabricJS – 如何删除 Line 对象的 URL 字符串中的当前对象转换？

In this tutorial, we will learn how to remove the current object transformation (scale, angle, flip, skew) from the URL string of a Line object using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled.

We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. To remove the current object transform from the Line object's URL string, we use the withoutTransform property.

grammar

toDataURL({ withoutTransform: Boolean }: Object): String

parameter

  • Options (optional) - This parameter is an object that provides additional customization for the URL representation of the Line 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 transformation of the current object. By passing it a true value, there will be no scale, angle, flip, or tilt in the final output image.

Use the withoutTransform attribute and pass it an error value

Example

Let's look at a code example to see the output image when the withoutTransform property is passed a false value. Once we open the console from the dev tools, we can see the URL representation of the Line 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 scaleY and angle properties to the Line object, specifying the vertical scale factor and angle respectively. Therefore, our output will be scaled vertically and rotated by 70 degrees. However, since we also passed a false value to the withoutTransform property, our final output image will still contain the scaleY and angle properties. 

<!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 the 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 and has an angle of 70 degrees
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

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

Use the withoutTransform attribute and pass it a true value

Example

Let's look at a code example to see what the final output image of a Line 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 the 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 or an angle of 70 degrees
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

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

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

字符串 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to align a Flexbox container to the center using JavaScript?Next article：How to align a Flexbox container to the center using JavaScript?

Related articles

See more