Home > Article > Web Front-end > How to set the color of a circle control corner using FabricJS?

How to set the color of a circle control corner using FabricJS?

WBOYforward: 2023-08-23 10:13:14999browse

In this tutorial, we will use FabricJS to set the color of a Circle's control corner. The cornerColor property allows us to manipulate the color of the control corners when the object is active.

Syntax

new fabric.Circle({ cornerColor: String }: Object)

Parameters

options (optional) - This parameter is a Object, provides options for additional customization of the circle. Using this parameter, you can change the color, cursor, stroke width and many other properties of the object related to the cornerColor property.

Option Key

##cornerColor - This property accepts a The string , allows us to assign a color to the control corners of the selected object.

Example 1

Pass cornerColor as key and color name as value

Let’s do this by using

cornerColorExample of property to change color. In this case, we assign the value "black" to the key, making the control corner appear black.

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "black"
         });
         
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Assign RGBA value to cornerColor attribute

We can assign RGBA value to key’s

String value instead of just passing a simple color name. RGBA stands for red, green, blue and transparency (alpha). Let’s look at an example to understand how to achieve this −

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

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

The above is the detailed content of How to set the color of a circle control corner 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 maintain the stroke width of a rectangle when scaling with FabricJS?Next article：How to maintain the stroke width of a rectangle when scaling with FabricJS?

See more

How to set the color of a circle control corner using FabricJS?

Syntax

Parameters

Option Key

Related articles