Home > Article > Web Front-end > How to add a stroke to a circle using FabricJS?

How to add a stroke to a circle using FabricJS?

PHPzforward: 2023-08-24 17:57:131071browse

如何使用 FabricJS 向圆添加描边？

In this tutorial, we will learn how to add a stroke to a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the Fabric.Circle class and add it to the canvas. Our circle object can be customized in many ways, such as changing its dimensions, adding a background color, or changing the color of the lines drawn around the object. We can do this by using the stroke property.

Syntax

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

Parameters

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

Option Key

Stroke - This property accepts String And determine the color of the object's border.

Example 1

Passing strokes as keys have hexadecimal values 

Let Let's look at an example to see how a circular object appears when using the lines property. Hexadecimal color codes begin with "#" followed by a six-digit number representing the color. In this example, we used "#ff4500" which is orange-red.

<!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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the orange-red outline around the circle. It appears as we have applied the    <b>stroke</b> property and assigned it a hexadecimal color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "#ff4500",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing 'rgba' value to lines attribute

In this example we will understand How to assign an rgba value to the stroke attribute. Instead of hexadecimal color codes we can use RGBA values which stand for: red, blue, green and alpha. The alpha parameter specifies the opacity of the color. In this example, we used the rgba value (255,69,0,0.5), which is an orange-red color with an opacity of 0.5.

<!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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the outline around the circle. Here we have applied the <b>stroke</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "rgba(255,69,0,0.5)",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to add a stroke to a circle 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：Why don't Postman get the "'Access-ControlAllow-Origin' header does not exist on the requested resource" error in JavaScriptNext article：Why don't Postman get the "'Access-ControlAllow-Origin' header does not exist on the requested resource" error in JavaScript

See more