栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Fabric.js-如何使用自定义属性在服务器上保存画布

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Fabric.js-如何使用自定义属性在服务器上保存画布

好问题。

如果要向对象添加自定义属性,则这些对象在某种程度上可能是“特殊的”。子类化似乎是一个合理的解决方案。

例如,这是我们将a子类

fabric.Image
化为命名图像的方法。这些图像对象然后可能具有“ Gandalf”或“ Samwise”之类的名称。

fabric.NamedImage = fabric.util.createClass(fabric.Image, {  type: 'named-image',  initialize: function(element, options) {    this.callSuper('initialize', element, options);    options && this.set('name', options.name);  },  toObject: function() {    return fabric.util.object.extend(this.callSuper('toObject'), { name: this.name });  }});

首先,我们给这些对象一个类型。此类型用于

loadFromJSON
自动调用
fabric.<type>.fromObject
方法。在这种情况下会是
fabric.NamedImage.fromObject

然后,我们覆盖

initialize
(构造函数)实例方法,以便在初始化对象时也设置“名称”属性(如果提供了该属性)。

然后,我们覆盖

toObject
实例方法以在返回的对象中包含“名称”(这是结构中对象序列化的基石)。

最后,我们还需要实现

fabric.NamedImage.fromObject
我之前提到的
loadFromJSON
方法,以便知道在JSON解析期间要调用的方法:

fabric.NamedImage.fromObject = function(object, callback) {  fabric.util.loadImage(object.src, function(img) {    callback && callback(new fabric.NamedImage(img, object));  });};

我们正在这里加载图像(来自“
object.src”),然后从中创建一个实例

fabric.NamedImage
。请注意,到那时,构造函数将已经处理“名称”设置,因为我们之前覆盖了“初始化”方法。

并且我们还需要指定它

fabric.NamedImage
是一个异步“类”,这意味着它
fromObject
不返回实例,而是将其传递给回调:

fabric.NamedImage.async = true;

现在我们可以尝试一下:

// create image elementvar img = document.createElement('img');img.src = 'https://www.google.com/images/srpr/logo3w.png';// create an instance of named imagevar namedImg = new fabric.NamedImage(img, { name: 'foobar' });// add it to canvascanvas.add(namedImg);// save jsonvar json = JSON.stringify(canvas);// clear canvascanvas.clear();// and load everything from the same jsoncanvas.loadFromJSON(json, function() {  // making sure to render canvas at the end  canvas.renderAll();  // and checking if object's "name" is preserved  console.log(canvas.item(0).name);});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/418353.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号