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デモの例を完成させました。 サブクラス化された画像と他のオブジェクトを選択し、グループボタンをクリックした場合： 画像が消えます。

写真のscrプロパティが設定されていません（前のグループの「グループ解除」の警告に示されています）。

キャンバスを文字列にすると、「src」が欠落していることも示されます。

「photo.set（ 'src'、...）」を使用してsrc値を強制しても（fiddleを参照）、 - グループ化によってピクチャが消えます。 - 文字列化にはまだ "src"属性がありません。 （私はオブジェクトを無駄に拡張しようとしました）

サブクラス化されたオブジェクトを扱うためのグループ化と文字列化の仕方は？ ご協力いただきありがとうございます。

Answer 1

ここでは、サブクラス化された（PolaroidPhoto）画像で正しいグループ化とJSON負荷を示す新しいjsfiddleがあります。ファブリックのバージョンは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(); 
    } 
}); 

おかげ