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

如何使用FabricJS找到图像的对象比例因子?

在本教程中,我们将学习如何使用fabricjs查找图像的对象比例因子。我们可以通过创建fabric.image的实例来创建一个图像对象。由于它是fabricjs的基本元素之一,我们还可以通过应用诸如角度、不透明度等属性来轻松自定义它。为了找到图像的对象比例因子,我们使用gettotalobjectscaling方法。
语法gettotalobjectscaling(): object
使用gettotalobjectscaling方法example 的中文翻译为:示例在这个例子中,我们使用了gettotalobjectscaling方法来获取图像的对象缩放因子。在这种情况下,记录的输出分别为scalex和scaley约为1.5。
<!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 gettotalobjectscaling method</h2> <p> you can open the console from dev tools to see that the logged output contains the object scale factor </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, skewx: 15, }); // add it to the canvas canvas.add(image); // using the gettotalobjectscaling method console.log( the scale factor of the image object is: , image.gettotalobjectscaling() ); </script></body></html>
使用 gettotalobjectscaling 方法和 scalex 属性example 的中文翻译为:示例让我们来看一个代码示例,当使用gettotalobjectscaling方法与scalex属性一起使用时,输出的日志如何。在这里,我们将scalex属性的值设为2。因此,日志输出显示scalex的值约为3,而scaley的值保持不变。
<!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 gettotalobjectscaling method along with scalex property</h2> <p> you can open the console from dev tools to see that the logged output contains the object scale factor </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, skewx: 15, scalex: 2, }); // add it to the canvas canvas.add(image); // using the gettotalobjectscaling method console.log( the scale factor of the image object is: , image.gettotalobjectscaling() ); </script></body></html>
以上就是如何使用fabricjs找到图像的对象比例因子?的详细内容。
其它类似信息

推荐信息