2016-11-09 6 views
0

私はカスタムプロパティを追加したイメージオブジェクトを持っています。 オブジェクトを文字列化すると、そのプロパティはそこにあることがわかりますが、toSVGを使用してSVGを書き出すと、カスタムプロパティはSVGソースにありません。fabricjsオブジェクトからSVGへのカスタムプロパティのエクスポート

私は

これが可能である(複数のプロパティを追加する可能性が)SVG画像のXMLデータ内のカスタムプロパティとしてエクスポートすることが、私の例では、nameプロパティをご希望ですか?

してくださいそれ自体、私のバイオリン:https://jsfiddle.net/Jonah/ujexg46s/

var svgImage = fabric.util.createClass(fabric.Image, { 
    initialize: function(element, options) { 
    this.callSuper("initialize", element, options); 
    options && this.set("name", options.name); 
    }, 
    toObject: function() { 
    return fabric.util.object.extend(this.callSuper('toObject'), { 
     name: this.name 
    }); 
    } 
}); 

var canvas = new fabric.Canvas('container'); 

function loadImage() { 
    var img = new Image(); 
    img.src = imageSrc; 
    img.onload = function() { 
    var image = new svgImage(img, { 
     name: "test", 
     left: 0, 
     top: 0 
    }); 
    canvas.add(image); 
    } 

} 

document.getElementById('load-btn').onclick = function() { 
    loadImage(); 
}; 

document.getElementById('export-btn').onclick = function() { 
    canvas.deactivateAll().renderAll(); 
    console.log(JSON.stringify(canvas)); 
    window.open('data:image/svg+xml;utf8,' + encodeURIComponent(canvas.toSVG())); 

}; 
+0

たぶん@kangaxは、この上でいくつかの光を当てることができますか? :) – Jonah

答えて

0
You can find answer here. 
fabric.util.object.extend(fabric.Image.prototype, { 
    toObject: function(propertiesToInclude) { 
     return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), { 
      src: this._originalElement.src || this._originalElement._src, 
      filters: this.filters.map(function(filterObj) { 
       return filterObj && filterObj.toObject(); 
      }), 
      crossOrigin: this.crossOrigin, 
      alignX: this.alignX, 
      alignY: this.alignY, 
      meetOrSlice: this.meetOrSlice, 
      name: this.name 
     }); 
    }, 
}); 

https://jsfiddle.net/mullainathan/ujexg46s/1/

+0

いいえ、それは動作しません。 svgソースを見ると、値testでプロパティ名を見つけることができません。 svgのソースは私のフィドルと同じです。 – Jonah

関連する問題