Home >Web Front-end >JS Tutorial >How to set the radius of a circle using FabricJS?

How to set the radius of a circle using FabricJS?

王林forward: 2023-09-11 09:13:02975browse

如何使用 FabricJS 设置圆的半径？

In this tutorial, we will learn how to set the radius of a circle using FabricJS. We can specify the position, color, opacity, and size of the circular object in the canvas, but first we must specify the radius of the circle we want to display. This can be done using the radius attribute.

Syntax

new fabric.Circle({ radius : Number }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our circles. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the object whose radius is the property.

Option Key

Radius − This property it accepts A numeric value. The assigned value determines the radius of the circle.

Example 1

Passing radiusproperty as key

Let’s look at one in FabricJS Example of setting the radius of a circle. In this example, we specified a value of 50 for the radius property, creating a circle with a radius of 50px wide. Decimal values can also be added.

<!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 radius of a circle using FabricJS</h2>
      <p>Here we have set the <b>radius</b> at 50px. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Pass the value as an expression instead of a single numeric value

In addition to passing a single numeric value, you can also pass the radius attribute Assign an expression. In this example, we used the expression: [(30 * 3) 10] , which evaluates to 100, so the radius of the circle is 100px.

<!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 radius of a circle using FabricJS</h2>
      <p>Here we have set the radius at 100px, but instead of passing a single numerical value, we have used an expression [(30*3)+10].</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: (30 * 3) + 10,
            fill: "#ffa500"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

值传递对象

Statement：

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

Previous article：How to calculate GCD of two or more numbers/arrays in JavaScript?Next article：How to calculate GCD of two or more numbers/arrays in JavaScript?

See more