Home > Article > Web Front-end > FabricJS - Determine whether fill or stroke should be drawn first for a polygon object?

FabricJS - Determine whether fill or stroke should be drawn first for a polygon object?

王林forward: 2023-08-24 17:01:101359browse

FabricJS – 确定对于多边形对象应该首先绘制填充还是描边？

We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. To determine whether the fill or stroke should be drawn first, we use the paintFirst property.

grammar

new fabric.Polygon( points: Array, { paintFirst: String }: Object )

parameter

points - This parameter accepts an Array, which represents the array of points that make up the polygon object, where each point is represented by x and y object.
Options (optional) - This parameter is an object that provides additional customization to our object. Using this parameter, you can change the origin, stroke width, and many other properties associated with the Polygon object, where paintFirst is a property of that object.

Option key

paintFirst - This property accepts a String value that defines whether the fill or stroke is drawn first. The default value is "fill".

Example 1: Default appearance of polygon objects

Let's look at a code example to see how a polygon object appears when the paintFirst property is not applied. In this example, use the default value "fill". This means that when an object is drawn, the fill color is drawn first, followed by the stroke color.

<!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>Default appearance of polygon object</h2>
   <p>You can see the default appearance of polygon object</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

Example 2: Using the paintFirst attribute

Let's look at a code example of how to use the paintFirst property to change the default behavior of a polygon object. Here we pass the value "lines" to the paintFirst property. This ensures that the stroke is drawn first and not the fill.

<!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>Using the paintFirst property</h2>
   <p>You can see that the stroke is painted first now</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            paintFirst: "stroke",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to determine whether a fill or stroke should be drawn first for a polygon.

The above is the detailed content of FabricJS - Determine whether fill or stroke should be drawn first for a polygon object?. For more information, please follow other related articles on the PHP Chinese website!

String Array 对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program: Count the number of sets of 1's and 0's in a binary matrixNext article：JavaScript program: Count the number of sets of 1's and 0's in a binary matrix

See more