Question

我有一个具有自定义属性“ childs”的区域A，此属性是我将区域B放置到的数组。区域B具有一个自定义属性“另一个”。

问题在于序列化画布并在画布上加载json之后，事件侦听器不会加载矩形B的属性“另一个”。

在这里您可以更好地看到问题：https://jsfiddle.net/ps7566/y3k5b4c1/

var a = new fabric.Rect({
   left: 70,
   top: 70,
   fill: 'blue',
   width: 100,
   height: 100
});
var b = new fabric.Rect({
   left: 75,
   top: 75,
   fill: 'red',
   width: 50,
   height: 50
});
b.another = 'property';//this custom property is losed in event observer after serialize
a.childs = [];
a.childs.push(b);
canvas.add(a);

canvas.observe("mouse:up",function(e){
if(e.target != null){
   console.log(e.target);
   alert(e.target.childs[0].another);
   //why this is undefined after serialize and load json? 
}
});
function serialize(){
    json = JSON.stringify(canvas.toJSON(['childs','another']));
}
function loadJSON(){
    canvas.loadFromJSON(json);
}

我希望事件侦听器即使在加载JSON之后也可以访问属性“另一个”。

Answer 1

问题是，在加载json之后，childs对象不是klass对象。您需要重写toObject和fromObject方法。在fromObject方法中，您需要将forceAsync设置为false，因为您需要等待孩子的创建。

var canvas = new fabric.Canvas("c",{
	width: 600,
  height: 500,
  backgroundColor: 'cyan'
});
var a = new fabric.Rect({
  left: 70,
  top: 70,
  fill: 'blue',
  width: 100,
  height: 100
});
var b = new fabric.Rect({
  left: 75,
  top: 75,
  fill: 'red',
  width: 50,
  height: 50
});
b.another = 'property';//this custom property is losed in event observer after serialize;
a.another = 'property';//this custom property is losed in event observer after serialize;
a.childs = [];
a.childs.push(b);
a.childs.push(b);
canvas.add(a);
//function printObj(){
//	console.log(r);
//}
//function addChild(){
//	r.childs.push(s);
//}
var json;
 serialize = function(){
	json = JSON.stringify(canvas.toJSON(['childs','another']));
}
  loadJSON = function(){
  
  canvas.clear();

	canvas.loadFromJSON(json);
}
canvas.observe("mouse:up",function(e){
	if(e.target != null){
  	console.log(e.target);
    alert(e.target.childs[0].another);//why this is undefined after serialize and load json? 
  }
});
fabric.Rect.prototype.toObject = (function(toObject) {
    return function(propertiesToInclude) {
        var data = toObject.call(this,propertiesToInclude),childs=[];
        
        if(this.childs && this.childs.length){
        	 for(var i= 0 ; i<this.childs.length; i++){
           		childs.push(this.childs[i].toObject(propertiesToInclude));
           }
           
        }
        data.childs = childs;
        return data;
    };
})(fabric.Rect.prototype.toObject);
fabric.Rect.fromObject = function(object, callback, forceAsync) {
 
    var obj = fabric.Object._fromObject('Rect', object, null, false);
    obj.childs = [];
    if(object.childs && object.childs.length){
    	 for(var i= 0 ; i<object.childs.length; i++){
           obj.childs[i] = fabric.Object._fromObject('Rect', object.childs[i], null, 0);
       }
    }
    return callback ? callback(obj) : obj;
  };


//The project has to be programmed in this way. with an array, event o

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<!-- <button onClick="printObj()">Print rect</button> -->
<!-- <button onClick="addChild()">Add Child</button> -->
<button onClick="serialize()">Serialize</button>
<button onClick="loadJSON()">Load JSON</button>
<!-- <button onClick="canvas.remove(r)">Delete Rect</button>  -->
<canvas id="c"></canvas>

为什么序列化后在事件观察器中丢失了此自定义属性？

1 个答案: