Fabric.js：分组子类化对象时缺少src属性

Question

我试图使用子类化，如http://fabricjs.com/polaroid中的示例所示。

的PolaroidPhoto子类只是增加了在图像上边框上以下小提琴如图所示：https://jsfiddle.net/gusy54rr/6/

canvas = this.__canvas = new fabric.Canvas('c', { 
    backgroundColor: '#333', 
    HOVER_CURSOR: 'pointer' 
    }); 

    var PolaroidPhoto = fabric.util.createClass(fabric.Image, { 
    H_PADDING: 20, 
    V_PADDING: 20, 
    originX: 'center', 
    originY: 'center', 
    initialize: function(src, options) { 
     this.callSuper('initialize', options); 
     this.image = new Image(); 
     this.image.src = src; 
    console.log("In initialize, src is:" + 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); 
    }, 
    _render: function(ctx) { 
     if (this.loaded) { 
     ctx.fillStyle = '#fff'; 
     ctx.fillRect(
      -(this.width/2) - this.H_PADDING, 
      -(this.height/2) - this.H_PADDING, 
      this.width + this.H_PADDING * 2, 
      this.height + this.V_PADDING * 2); 
     ctx.drawImage(this.image, -this.width/2, -this.height/2); 
     } 
    } 
    }); 
    var photo = new PolaroidPhoto('https://i.stack.imgur.com/cqmQ9.png', { }); 

photo.on('image:loaded', canvas.renderAll.bind(canvas)); 

photo.set('scaleX', 1); 
photo.set('scaleY', 1); 
photo.set('top', 180); 
photo.set('left', 150); 
    console.log("photo,src is :" + photo.get('src')); 

    // forcing src value (but ineffective) 
photo.set('src', 'https://i.stack.imgur.com/cqmQ9.png'); 

    canvas.add(photo); 


canvas.add(
    rect= new fabric.Rect({ top: 50, left: 100, width: 50, height: 50, fill: '#f55' }), 
circle = new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }), 
    triangle = new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' }) 
); 

$("#group").on('click', function() { 
    var activegroup = canvas.getActiveGroup(); 
    var objectsInGroup = activegroup.getObjects(); 

    activegroup.clone(function(newgroup) { 
      canvas.discardActiveGroup(); 
      objectsInGroup.forEach(function(object) { 
      canvas.remove(object); 
      }); 
      canvas.add(newgroup); 

    }); 
}); 

$("#ungroup").click(function(){ 
    var activeObject = canvas.getActiveObject(); 
    if(activeObject.type=="group"){ 
      var items = activeObject._objects; 
      alert(items); 
      activeObject._restoreObjectsState(); 
      canvas.remove(activeObject); 
      for(var i = 0; i < items.length; i++) { 
       canvas.add(items[i]); 
      items[i].dirty = true; 
       canvas.item(canvas.size()-1).hasControls = true; 
      } 
     canvas.renderAll(); 
    } 
}); 

，直到我想字符串化或使与子类的对象分组一些它工作正常。

在小提琴中，我通过添加几个基础对象（矩形，圆形和三角形）完成了Fabric演示的示例。 如果我选择subclassed图像和任何其他物体，然后单击组按钮： 图像消失。

未设置照片的scr属性（如前一组的“取消组合”警报所示）。

画布的字符串化还显示缺少“src”。

即使我使用“photo.set（'src'，...）”强制（见小提琴）src值： - 分组仍然使图片消失。 - 字符串化仍然缺少“src”属性。 （我试图扩展到对象无济于事）

如何获得分组和字符串化以处理子类对象？ 感谢您的帮助。

Answer 1

这是一个新的jsfiddle，显示正确的分组和JSON加载与子分类（PolaroidPhoto）图像。面料版本是1.7.19 https://jsfiddle.net/rpzk7wL6/2/

我在代码中放了一些注释来显示我的修改。 前脚本中的主要问题是缺少fromObjects（）方法。 我还在fromObjects中添加了一个侦听“image：loaded”的处理程序给创建的 创建的子类实例，以便在加载后呈现它。

 fabric.Object.prototype.transparentCorners = false; 

    canvas = this.__canvas = new fabric.Canvas('c', { 
    backgroundColor: '#333', 
    HOVER_CURSOR: 'pointer' 
    }); 

fabric.Polaroidphoto = fabric.util.createClass(fabric.Image, { 
type: 'polaroidphoto', 
    H_PADDING: 20, 
    V_PADDING: 20, 
    originX: 'center', 
    originY: 'center', 
    initialize: function(src, options) { 
    this.image = new Image(); 
    this.image.src = src; 
     this.callSuper('initialize',src, options); 
     console.log("initialize, src:" + src); 
     this.image.onload = (function() { 
      this.width = this.image.width; 
     console.log("initialize, scaleX:" + this.image.scaleX); 
      this.height = this.image.height; 
     this.src= this.image.src; 
     console.log("initialize image.onload, src:" + src); 
      this.loaded = true; 
      this.setCoords(); 
      this.fire('image:loaded'); 
      }).bind(this); 
     }, 
    _render: function(ctx) { 
    if (this.loaded) { 
     console.log("_render:is_loaded"); 
      ctx.fillStyle = '#fff'; 
      ctx.fillRect(
       -(this.width/2) - this.H_PADDING, 
       -(this.height/2) - this.H_PADDING, 
       this.width + this.H_PADDING * 2, 
       this.height + this.V_PADDING * 2); 
       ctx.drawImage(this.image, -this.width/2, -this.height/2); 
     } else { 
     console.log("_render:is_NOT__loaded"); 
     } 
    } 
    }); 

// Added fromObject function for sub-class 
fabric.Polaroidphoto.async = true; 
fabric.Polaroidphoto.fromObject = function (object, callback) { 
console.log("fabric.Polaroidphoto.fromObject object.src) :" + object.src); 
      var instance = new fabric.Polaroidphoto(object.src, object); 
      callback && callback(instance); 
    // added handler to render instance 
     instance.on('image:loaded', when_loaded); 
      }; 

var photo = new fabric.Polaroidphoto('https://i.stack.imgur.com/cqmQ9.png', { }); 
photo.on('image:loaded', when_loaded); 
photo.set('scaleX', 1); 
photo.set('scaleY', 1); 
photo.set('top', 180); 
photo.set('left', 150); 
canvas.add(photo); 


canvas.add(
    rect= new fabric.Rect({ top: 50, left: 100, width: 50, height: 50, fill: '#f55' }), 
circle = new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }), 
    triangle = new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' }) 
); 

// required at load to render sub-classed image in group 
function when_loaded() { 
    console.log("when_loaded"); 
    dirty(); // to set dirty : true 
    canvas.renderAll(); 
} 

// required at load to display sub-classed image in group, 
// set dirty:true for groups 

function dirty() { 
    $.each(canvas._objects, function(index, obj) { 
     if(typeof obj.type !== 'undefined' && obj.type == 'group') { 
      obj.dirty= true; 
     } 
    }); 
} 

$("#group").on('click', function() { 
    var activegroup = canvas.getActiveGroup(); 
    var objectsInGroup = activegroup.getObjects(); 

    activegroup.clone(function(newgroup) { 
      canvas.discardActiveGroup(); 
      objectsInGroup.forEach(function(object) { 
      canvas.remove(object); 
      }); 
      canvas.add(newgroup); 
     newgroup.dirty = true; 
    }); 
}); 

$("#ungroup").click(function(){ 
    var activeObject = canvas.getActiveObject(); 
    if(activeObject.type=="group"){ 
      var items = activeObject._objects; 
      alert(items); 
      activeObject._restoreObjectsState(); 
      canvas.remove(activeObject); 
      for(var i = 0; i < items.length; i++) { 
       canvas.add(items[i]); 
      items[i].dirty = true; 
      canvas.item(canvas.size()-1).hasControls = true; 
      } 
     canvas.renderAll(); 
    } 
}); 

感谢