In this tutorial we will learn how to find the Complexity of an Image instance Use FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can easily customize it as well Apply properties such as angle, opacity, etc. To find the complexity of the image For example, we use the Complexity method. This method will return 1 if the current object is Inherit directly from the base class rather than from subclasses.
complexity(): Number
Let's look at a code example to see the output logged when using the complexity method Gets the complexity of an Image instance. Complexity is 1 unless subclassified.
<!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 complexity method</h2> <p>You can open console from dev tools and see the logged output</p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, }); // Add it to the canvas canvas.add(image); // Using the complexity method console.log("The complexity of Image instance is: ", image.complexity()); </script> </body> </html>
In this example, we used the Complexity method to compare Image instances and polygon instances. You can open the console from the dev tools Seeing complexity is different.
<!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 complexity method to compare different objects</h2> <p>You can open console from dev tools and see the logged output</p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 50, left: 50, }); // Initiate a Polygon object var polygon = new fabric.Polyline( [ { x: 50, y: 30 }, { x: 105, y: 10 }, { x: 160, y: 30 }, { x: 100, y: 150 }, ], { fill: "red", left: 450, top: 70, } ); // Add them both to the canvas canvas.add(image); canvas.add(polygon); // Using the complexity method console.log("The complexity of Image instance is: ", image.complexity()); console.log( "The complexity of Polygon instance is: ", polygon.complexity() ); </script> </body> </html>
The above is the detailed content of How to find the complexity of an Image instance using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!