我正拼命地想办法解决这个问题,而我找到的所有信息都没有提供解决方案。我在StackOverflow上看过相关的问题,虽然我看到了代码,但我无法解决这个问题。
我创建了一个失败的JSFiddle。这是代码:
var canvas = window._canvas = new fabric.Canvas('c');
fabric.imagePlaceholder = fabric.util.createClass(fabric.Text, {
type: 'imagePlaceholder',
initialize: function(text, options) {
options || (options = { });
console.log('imagePlaceholder', text, options);
this.callSuper('initialize', text, options);
this.set('imageId', options.imageId || '');
this.set('text', 'Loading ' + text || 'Loading...');
this.set('type', 'imagePlaceholder');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
imageId: this.get('imageId'),
type: this.get('type'),
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
ctx.font = '20px Arial';
ctx.fillStyle = '#333';
ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
},
});
fabric.imagePlaceholder.fromObject = function (object, callback) {
var _enlivenedObjects;
fabric.util.enlivenedObjects(object.objects, function (enlivenedObjects) {
delete object.objects;
_enlivenedObjects = enlivenedObjects;
});
return new fabric.imagePlaceholder(_enlivenedObjects, object);
};
// Added or not it doesn't work :(
fabric.imagePlaceholder.async = true;
newObject = new fabric.imagePlaceholder('cat_image.jpg', {imageId:Date.now()});
canvas.add(newObject);
var json = window._json = canvas.toJSON();
console.log(json);
//Comment out the following to see the 'undefined' object being created..
//canvas.clear();
//canvas.loadFromJSON(json);本质上,我创建了一个自定义类,以便以JSON的形式从服务器加载保存的状态,将其加载到画布中,然后遍历对象,找到占位符,并将它们替换为来自安全映像服务的图像。问题是,我似乎无法克服异步问题。有什么想法吗?
提前谢谢你,
乔纳森
发布于 2018-04-17 21:11:53
在查看代码几小时后,我也遇到了同样的问题。
type: 'imagePlaceholder'转换为CamelCase,以便在读取JSON数据时访问对象
fabric.imagePlaceholder = ...需要
fabric.ImagePlaceholder = ...为了让它发挥作用
https://stackoverflow.com/questions/39915888
复制相似问题