Home > Article > Web Front-end > How to set the horizontal and vertical radius of an ellipse using FabricJS?

How to set the horizontal and vertical radius of an ellipse using FabricJS?

PHPzforward: 2023-09-12 09:25:02638browse

如何使用 FabricJS 设置椭圆的水平和垂直半径？

In this tutorial, we will learn how to set the horizontal and vertical radius of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. We can customize the ellipse object by specifying its position, color, opacity, and size. However, the most important properties are rx and ry, which allow us to specify the horizontal and vertical radii of the ellipse.

Syntax

new fabric.Ellipse({ rx : Number, ry: Number }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the objects of the rx and ry properties.
li>

Option Key

rx - This property accepts numbers value. The assigned value determines the horizontal radius of the ellipse object.
ry - This property accepts a numeric value. The assigned value determines the vertical radius of the ellipse object.

Example 1Default appearance when

rx and ry are not used

The following code shows how an ellipse object will appear when rx and the ry property is not used. In this example we can see that we used a fill color to discover the ellipse, which is invisible because we did not assign a horizontal and vertical radius to it.

<!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>Setting the horizontal and vertical radius of an Ellipse using FabricJS</h2>
      <p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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: 115,
            top: 50,
            fill: "red",
         });

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

Example 2

Passing the rx and ry properties as keys

In this example , we pass values 100 and 70 to the rx and ry properties respectively. So our ellipse object has a horizontal radius of 100 pixels and a vertical radius of 70 pixels.

<!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 horizontal and vertical radius of Ellipse using FabricJS?</h2>
      <p>Here we have supplied the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. Hence we are getting an ellipse of a definite dimension. </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: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
         });

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

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

对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to generate a matrix whose sum of subdiagonals is equal to a perfect squareNext article：JavaScript program to generate a matrix whose sum of subdiagonals is equal to a perfect square

See more