FabricJS - How to scale an image object to a given height?

In this tutorial, we will learn how to scale an Image object to a given height using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. To scale an Image object to a given height, we use the scaleToHeight method.

grammar

scaleToHeight(value: Number, absolute: Boolean): fabric.Object 

parameter

• value - This parameter accepts a Number, which determines the new height value of the Image object.

  < /里>

• absolute - This parameter accepts a boolean value that determines whether the viewport is ignored.

Default appearance of Image object

Example

Let's look at a code example to see what the image object looks like without using the scaleToHeight method. In this case, our image object will not scale horizontally or vertically.

   
   



   
Default appearance of the Image object
   

      You can see that the object has not been scaled in horizontal or vertical direction
   
 
   
   
   

 

Use custom value to pass scaleToHeight Method

Example

In this example, we will see how to scale an image object to a given height by assigning a value to the scaleToHeight method. Since we have passed the value as 100, this will be the new height of the image object.

    
   



   
Passing the scaleToHeight method with a custom value
   
You can see that the new height of our image object is 100
   
   
   

 

The above is the detailed content of FabricJS - How to scale an image object to a given height?. For more information, please follow other related articles on the PHP Chinese website!