How to create an ellipse with border color using FabricJS?-JS Tutorial-php.cn

How to create an ellipse with border color using FabricJS?

王林

Release： 2023-09-02 16:53:02

forward

1167 people have browsed it

如何使用 FabricJS 创建带有边框颜色的椭圆？

In this tutorial, we will create an ellipse with a border color using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. Since FabricJS is so flexible, we can customize the ellipse object any way we like. One of the properties provided by FabricJS is borderColor, which allows us to manipulate the color of the border when the object is active.

Syntax

new fabric.Ellipse({ borderColor: String }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> 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 borderColor is the property.

Options Keys

borderColor - This property accepts a StringDetermine the color of the border when actively selecting an object. Its default value is rgb(178,204,255).

Example 1

Passing the borderColor key using a string value

Let’s see how one can pass the borderColor key for borderColor Example of attribute assignment. We have assigned the value "blue" to the borderColor key, which helps create a blue border when the ellipse object is selected.

<!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 create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "blue" border color.</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: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "blue",
         });

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

Copy after login

Example 2

Pass the rgba value to the borderColor key

instead of the simple color name as a string Pass, we can also use the RGBA value, whose components specify the amount of red, green, blue, and alpha, where alpha represents opacity. In this example we used rgb(128,0,128) which is the purple rgb value.

<!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 create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "purple" border color.</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: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
         });

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

Copy after login

The above is the detailed content of How to create an ellipse with border color using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!