How to set the height of an ellipse using FabricJS?-JS Tutorial-php.cn

How to set the height of an ellipse using FabricJS?

WBOY

Release： 2023-08-24 15:05:07

forward

933 people have browsed it

如何使用 FabricJS 设置椭圆的高度？

In this tutorial, we will learn how to set the height of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. We can manipulate the ellipse object by changing its position, opacity, stroke, and its size. FabricJS allows us to control the size of objects using the width and height properties.

Syntax

new fabric.Ellipse({ height: Number }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with objects whose height is the property.

Option Key

Height - This property accepts numbers Allows us to specify the height of the object. The assigned value determines the height.

Example 1

height Default behavior of the property< /strong>

Let’s take an example to understand height The default behavior of the property.

<!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>How to set the height of an Ellipse using FabricJS?</h2>
      <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 100,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copy after login

Example 2

Pass the height property as key

Since the size of the ellipse is determined by its horizontal and vertical radius, there will be no change in its size.

<!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>How to set the height of an Ellipse using FabricJS?</h2>
      <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            top: 100,
            left: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            height: 90,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copy after login

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