How to set the color of a circle control corner using FabricJS?-JS Tutorial-php.cn

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

WBOY

Release： 2023-08-23 10:13:14

forward

977 people have browsed it

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

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)

Copy after login

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>

Copy after login

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>

Copy after login

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!