简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to set the position of image from top using FabricJS?

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

WBOY
WBOYforward
2023-09-20 22:57:041300browse

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)

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>

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>

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!

String 字符串 number 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Explain non-boolean to boolean coercion in JavaScript?Next article：Explain non-boolean to boolean coercion in JavaScript?

Related articles

See more