Fabric.js - 自定义 Fabric.Image 类在“loadFromJSON”>“fromObject”中不起作用

Posted 2023-03-25

【中文标题】Fabric.js - 自定义 Fabric.Image 类在“loadFromJSON”>“fromObject”中不起作用

【英文标题】：Fabric.js - customized Fabric.Image class don't work at "loadFromJSON">"fromObject"

【发布时间】：2019-03-29 00:33:59

【问题描述】：

我想将自定义 Fabric.Image 类保存为 JSON，然后使用 loadFromJSON 恢复它。

我查看了以下问题 Fabric.js - how to save canvas on server with custom attributes 但似乎“fromObject”部分进展不顺利。

当您按下以下网页上的“单击”按钮时会发生这种情况。 https://onoderayuuki.github.io/tana_motif/index.html

[子类]

 fabric.customMotif = fabric.util.createClass(fabric.Image, 
  type: 'customMotif',
  borderColor: '#19310B',
  cornerColor: '#19310B',
  cornerSize: 20,

 initialize: function(src, options) 
   this.callSuper('initialize', options);
   options && this.set('name', options.name);
   this.image = new Image();
   this.top = options.top;
   this.left = options.left;
   this.image.src = src;
   this.image.onload = (function() 
     this.width = this.image.width;
     this.height = this.image.height;
     this.loaded = true;
     this.setCoords();
     this.fire('image:loaded');
   ).bind(this);
 ,

  toObject: function(options) 
       return fabric.util.object.extend(this.callSuper('toObject'), 
       );
  ,
  _render: function(ctx) 
   if (this.loaded) 
      ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
   
  
);

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

[JSON]

  canvasState = JSON.stringify(canvas);
  canvas.loadFromJSON(canvasState);

谢谢。

【参考方案1】：

如果你检查这个函数，你会发现类的第一个字母是大写的。

getKlass: function(type, namespace) 
  // capitalize first letter only
  type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));
  return fabric.util.resolveNamespace(namespace)[type];
,

将类从 fabric.customMotif 重命名为 fabric.CustomMotif