
Find JSON Path Online
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
30 查看详情
在本教程中,我们将学习如何创建图像的 JSON 表示形式使用 FabricJS 的对象。我们可以通过创建一个实例来创建一个 Image 对象织物.图像。由于它是FabricJS的基本元素之一,我们也可以轻松地通过应用角度、不透明度等属性来自定义它。为了创建 JSONImage 对象的表示,我们使用 toJSON 方法。
语法
toJSON(propertiesToInclude: Array): Object
参数
propertiesToInclude – 此参数接受一个 Array,其中包含任何我们可能希望在输出中额外包含的属性。这个参数是可选。
使用toJSON方法
示例
让我们看一个代码示例,看看使用 toJSON 方法时记录的输出。在在这种情况下,将返回图像实例的 JSON 表示形式。
Using the toJSON method
You can open console from dev tools and see that the logged output contains the JSON representation of the image instance
// 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 toJSON method console.log( "JSON representation of the Image instance is: ", image.toJSON() );
使用toJSON方法添加其他属性
示例
让我们看一个代码示例,看看如何使用toJSON 方法。在本例中,我们添加了一个名为“name”的自定义属性。我们可以将特定属性作为选项中的第二个参数传递给 fabric.Image 实例对象并将相同的密钥传递给 toJSON 方法。
Using toJSON method to add additional properties
You can open console from dev tools and see that the logged output contains added property called name
// 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 with name key // passed in options object var image = new fabric.Image(imageElement, { top: 50, left: 110, name: "Image instance", }); // Add it to the canvas canvas.add(image); // Using the toJSON method console.log( "JSON representation of the Image instance is: ", image.toJSON(["name"]) );
结论
在本教程中,我们使用两个示例来演示如何创建 JSON使用 FabricJS 表示 Image 对象。
以上就是如何使用 FabricJS 创建 Image 对象的 JSON 表示?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/531523.html
// 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 toJSON method console.log( "JSON representation of the Image instance is: ", image.toJSON() );
微信扫一扫
支付宝扫一扫