Home > Article > Web Front-end > How to set the position of a circle starting from the left using FabricJS?

How to set the position of a circle starting from the left using FabricJS?

WBOYforward: 2023-09-01 13:25:02735browse

如何使用 FabricJS 设置圆从左开始的位置？

In this tutorial, we will learn how to set the position of a circle from the left using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. We can manipulate the circular object by changing its position, opacity, stroke, and its size. You can change the position starting from the left using the left property.

Syntax

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

Parameters

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

Option Key

left - This property accepts a Number Set the left position of the object. This value determines how far to the left the object will be placed.

Example 1

Default placement of circle objects

Let’s look at a code example to understand circles The object's default position in the canvas when its position has not changed.

<!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 position of Circle from left using FabricJS</h2>
      <p>This is the default placement of the circle. Here we have not used the <b>left</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            fill: "white",
            radius: 100,
            stroke: "yellow",
            strokeWidth: 3
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing left attribute as key

In this example, we assign a Custom value. Since it accepts digits, you have to assign it a numeric value that represents its position from the left.

<!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 position of Circle from left using FabricJS</h2>
      <p>Here we have used the <b>left</b> property and assigned it a custom value to set the position of the circle from left. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            fill: "white",
            radius: 100,
            stroke: "yellow",
            strokeWidth: 3,
         });

         // Adding it to the canvas
         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 position of a circle starting from the left using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

number 对象 fabric

Statement：

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

Previous article：JavaScript program for range sum query that rotates array counterclockwise by K indexNext article：JavaScript program for range sum query that rotates array counterclockwise by K index

See more