FabricJs - 각 개체에 속성을 추가하는 방법

Question

기존 개체 속성 집합에 몇 가지 추가 속성을 도입해야합니다.

같은 :

1. ID
2. 지리적 위치
3. 등

나는 모양을 그릴 때마다, 나는 모양에 추가 속성을 추가하고 toDataLessJSON()

에서 얻을 필요합니다

Answer 1

다음은 맞춤 속성을 추가하고 JSON serializer에서 저장하는 코드입니다. 캔버스에있는 모든 객체에 대해 n. (표준 자바 스크립트 개체 속성을 사용했지만 나를 위해 작동)

canvas.myImages = {}; 
fabric.Image.fromURL('SOME-IMAGE-URL.jpg', function(img) { 
     canvas.myImages.push(img); 
     var i = canvas.myImages.length-1; 

     canvas.myImages[i].ID = 1; // add your custom attributes 
     canvas.myImages[i].GeoLocation = [40, 40]; 

     canvas.add(canvas.myImages[i]); 
     canvas.renderAll(); 
}); 

그런 다음 사용자 지정 특성을 개체 직렬화에 포함시킵니다.

// Save additional attributes in Serialization 
fabric.Object.prototype.toObject = (function (toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      textID: this.textID 
     }); 
    }; 
})(fabric.Object.prototype.toObject); 

// Test Serialization 
var json = JSON.stringify(canvas.toDatalessJSON()); 
console.log(json); 

canvas.clear(); 

// and load everything from the same json 
canvas.loadFromDatalessJSON(json, function() { 
    // making sure to render canvas at the end 
    canvas.renderAll(); 
} 

Answer 2

버전 1.7.0부터 levon 코드가 작동을 멈췄습니다. 당신은 properties 인수를 받아 toObject에게 전달해야

// Save additional attributes in Serialization 
fabric.Object.prototype.toObject = (function (toObject) { 
    return function (properties) { 
     return fabric.util.object.extend(toObject.call(this, properties), { 
      textID: this.textID 
     }); 
    }; 
})(fabric.Object.prototype.toObject); 

: 당신이해야 할 일은 다음과 같이 수정하는 것입니다.