search

Home >Web Front-end >JS Tutorial >How to set the background color of an elliptical selection using FabricJS?

How to set the background color of an elliptical selection using FabricJS?

PHPz
PHPzforward
2023-09-10 13:13:021493browse

How to set the background color of an elliptical selection using FabricJS?

In this tutorial, we will learn how to set the background color of an elliptical selection 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. When an object is actively selected, we can change the object's dimensions, rotate it, or manipulate it. We can change the background color of the elliptical selection using the selectionBackgroundColor property.

Syntax

new fabric.Ellipse({ selectionBackgroundColor : String }: 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 object for which selectionBackgroundColor is a property.

Option Key

  • selectionBackgroundColor - This property accepts characters The string em> determines the background color of the selection.

Example 1

selectionBackgroundColor Property is not used

Let us take an example to understand when selectionBackgroundColor How the selection content is displayed when the property is not used. From this example we can see that the selection area or the area behind the object has no color. 

<!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 background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the selection background has no color. Here we have not applied the <b>selectionBackgroundColor</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Example 2

Passing the selectionBackgroundColor property as a key

In this example we assign a value to selectionBackgroundColor property. In this case, we pass it the "darkBlue" color, so the selection area looks dark blue. 

<!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 background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the background of the selection appears dark blue. This is because we have set the <b>selectionBackgroundColor</b> as dark blue. </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: 80,
            ry: 50,
            fill: "#ff1493",
            selectionBackgroundColor: "darkBlue",
         });

         // 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 background color of an elliptical selection 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：What is the difference between forEach() and map() methods in JavaScript?Next article：What is the difference between forEach() and map() methods in JavaScript?

Related articles

See more