Question

从数据库加载JSON后，即使在JSON中top和left属性的值不是0，某些对象的位置也是（0,0）。我有一个自定义类，它具有MyElement对象的其他属性：

var MyElement = {
    contextMenu: ['delete'],
    toObject() {
        return {
            contextMenu: this.contextMenu
        };
    }
};
var MyImage = fabric.util.createClass(fabric.Image, MyElement, {
    type: 'MyImage',

    toObject(propertiesToInclude) {
        return this.callSuper('toObject', Object.assign(propertiesToInclude, MyElement.toObject.apply(this)));
    }
});

MyImage.fromURL = function(url, callback, imgOptions) {
    fabric.util.loadImage(url, function(img) {
        callback && callback(new MyImage(img, imgOptions));
    }, null, imgOptions && imgOptions.crossOrigin);
};

fabric.MyImage = MyImage;

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

，数据库中的JSON位于：JSON represantation of MyImage

在通过canvas.loadFromJSON(data, canvas.renderAll.bind(canvas));加载此JSON之后，即使top = 191显示的对象表示，MyImage也显示在（0,0）而不是left = 271和console.log(instanceOfMyImage)具有top和left的正确值。为什么？画布是否比设置的属性更早地渲染对象？但是显示的图像因此设置了特性...... 我注意到fabric.Image的实例效果很好。我的实施中的错误在哪里？

Answer 1

我在代码中找到了解决方案和错误。我需要编写一个initialize方法，其签名与fabric.Image中的签名相同，并且有效。缺少的代码下方：

initialize: function(element, options, callback) {
        this.callSuper('initialize', options);
        this._initElement(element, options, callback);
    },

加载fabric.js JSON

1 个答案: