How to set the position of image from top using FabricJS?-JS Tutorial-php.cn

How to set the position of image from top using FabricJS?

WBOY

Release： 2023-09-20 22:57:04

forward

1298 people have browsed it

How to set the position of image from top using FabricJS?

In this tutorial we will learn how to set the position of an image using From Top FabricJS. We can create an Image object by creating an instance of fabric.Image. since It is one of the basic elements of FabricJS and we can also customize it easily through the application Angle, opacity and other properties. To set the position of the image from the top we use top Properties.

grammar

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { top: Number }: Object, callback: function)

Copy after login

parameter

element - This parameter accepts a HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or String representing an image element. The string should be a URL and will be loaded as an image.
Options (optional) - This parameter is an object that provides additional customization for us Object. Using this parameter, you can change the origin, stroke width, and many other properties associated with the image object whose top is the property.
Callback (optional) - This parameter is the function to be called after the final filter is applied.

Option key

top - This property accepts a Number which allows us to set the distance Image canvas top.

Default appearance of Image object

Example

Let's look at a code example to understand how the image object looks when top Property not used.

<!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 Image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to set the position of image from top using FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

Pass the top attribute as a key with a custom value

Example

In this example, we assign the value 70 to the top attribute. This will ensure Our image object is placed 70 pixels from the top.

<!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>Passing the top property as key with a custom value</h2>
   <p>
      You can see that the Image object is placed at a distance of 70px from the top
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to set the position of image from top using FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 70,
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to set the position of image from top using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!