FabricJS - How to set color of line control corners?-JS Tutorial-php.cn

FabricJS - How to set color of line control corners?

王林

Release： 2023-09-09 21:57:02

forward

1541 people have browsed it

FabricJS – 如何设置线条控制角的颜色？

In this tutorial, we will learn how to set the color of the Line control corners using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the X and Y coordinates of the line and adding it to the canvas. The cornerColor property allows us to manipulate the color of the control corners while the object is active.

grammar

new fabric.Line( points: Array, { cornerColor: String }: Object)

Copy after login

parameter

points - This parameter accepts an Array of points, which determines the (x1, y1) and (x2, y2) values, respectively are the x-axis coordinates and y-axis coordinates of the starting point and end point of the line.
Options (optional) - This parameter is an object, which is useful for our purposes. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object whose cornerColor is the property.

Option key

cornerColor - This property accepts a String, which allows us to assign a color to the corners when the object is actively selected Control corner points. The default value is rgb(178,204,255).

Pass cornerColor as the key and the color name as the value

Example

Let's look at a code example that uses the cornerColor property to change the color. In this example, we assigned the key an "orange" value, causing the control corners to appear orange.

<!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>Passing cornerColor as key with a color name as value</h2>
   <p>
      You can select the line object to see that the corner colour is orange
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "orange"
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Copy after login

Assign an RGBA value to the cornerColor attribute

Example

We can also assign an RGBA value instead of passing a simple color name to the key as a String value. RGBA stands for red, green, blue, and alpha, where alpha is opacity. Let's look at a code example to illustrate how to do 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>Assigning an RGBA value to the cornerColor property</h2>
   <p>
      You can select the line object to see the corner colour
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "rgba(255,69,0, 0.8)",
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to set color of line control corners?. For more information, please follow other related articles on the PHP Chinese website!