您好,欢迎访问一九零五行业门户网

如何使用 FabricJS 查找 Image 实例的复杂度?

在本教程中,我们将学习如何查找 image 实例的复杂度使用 fabricjs。我们可以通过创建fabric.image的实例来创建一个image对象。由于它是fabricjs的基本元素之一,我们也可以轻松地自定义它应用角度、不透明度等属性。为了找到图像的复杂度例如,我们使用复杂性方法。如果当前对象是此方法将返回 1直接从基类继承,而不是从子类继承。
语法complexity(): number
使用复杂性方法示例让我们看一个代码示例,看看使用complexity方法时记录的输出获取 image 实例的复杂度。除非进行子分类,否则复杂度为1。
<!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>
使用复杂度方法来比较不同的对象示例在此示例中,我们使用了复杂度方法来比较图像实例和多边形实例。您可以从开发工具打开控制台看到复杂性是不同的。
<!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>
以上就是如何使用 fabricjs 查找 image 实例的复杂度?的详细内容。
其它类似信息

推荐信息