How to return a dataless object representation of a polygon using FabricJS?-JS Tutorial-php.cn

How to return a dataless object representation of a polygon using FabricJS?

WBOY

Release： 2023-08-25 18:54:46

forward

850 people have browsed it

如何使用 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. We can use the toDatalessObject method to return a dataless object representation of the polygon. This method returns the object representation of the polygon instance.

grammar

toDatalessObject( propertiesToInclude: Array ): Object

Copy after login

parameter

propertiesToInclude (optional) - This parameter accepts an Array which allows us to add any properties to be included in the output. This parameter is optional.

Example 1: Using toDatalessObject method

Let's look at a code example of how to view the dataless object representation of a Polygon object in the console using the toDatalessObject method.

<!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 toDatalessObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the dataless object representation of the polygon instance
   </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: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the toDatalessObject method
      console.log(
         "Dataless object representation of a Polygon instance is: ",
         polygon.toDatalessObject()
      );
   </script>
</body>
</html>

Copy after login

Example 2: Add additional properties using toDatalessObject method

Let's look at a code example to see how to include additional properties using the toDatalessObject method. In this example, we added a custom property called "name". We can pass specific properties to the fabric.Polygon instance as the second parameter in the options object and pass the same keys to the toDatalessObject method.

<!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 toDatalessObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the property called name
   </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 with name key 
      // passed in options object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
            name: "Polygon instance",
         } 
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the toDatalessObject method
      console.log(
         "Dataless object representation of a Polygon instance is: ",
         polygon.toDatalessObject(["name"])
      );
   </script>
</body>
</html>

Copy after login

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to return a dataless object representation of a polygon.

The above is the detailed content of How to return a dataless object representation of a polygon using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!