search

Home >Web Front-end >JS Tutorial >FabricJS - How to set the zoom multiplier in the URL string of a Line object?

FabricJS - How to set the zoom multiplier in the URL string of a Line object?

王林
王林forward
2023-08-28 12:25:11792browse

FabricJS – 如何在 Line 对象的 URL 字符串中设置缩放倍数？

In this tutorial, we will learn how to set the zoom multiplier in 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 a fabric.Line instance, specifying the x and y coordinates of the line and adding it to the canvas. To set the zoom multiplier in the URL string of the Line object, we use the multiplier property.

grammar

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

Option key

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

Do not use multiplierAttribute

Example

Let's look at a code example to see the output image when not using the multiplier attribute. 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. 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 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });

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

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

Use MultiplierProperties

Example

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

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

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

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

字符串 number 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to use FabricJS to enter editing state using functions in IText?Next article：How to use FabricJS to enter editing state using functions in IText?

Related articles

See more