Fabric.js - canvas.toDatalessJSON未按預期

這是我的上加載圖像到畫布：Fabric.js - canvas.toDatalessJSON未按預期

$(".img-link").on("click", function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'), 
     extension = url.substr((~-url.lastIndexOf(".") >>> 0) + 2); 

    if(extension !== 'svg') { 
     fabric.Image.fromURL(url, function(oImg) { 
      var ow = oImg.getWidth(), 
       oh = oImg.getHeight(); 

      oImg.lockUniScaling = true; 
      oImg.set({'left': ow/2, 'top': oh/2}); 
      canvas.add(oImg); 
     }); 
    } else { 
     var group = []; 
     fabric.loadSVGFromURL(url, function(objects,options) { 
     var loadedObjects = new fabric.Group(group); 
     loadedObjects.set({ 
       left: 100, 
       top: 100, 
       sourcePath: url 
     }); 
     canvas.add(loadedObjects); 
     canvas.renderAll(); 
     },function(item, object) { 
       object.set('id',item.getAttribute('id')); 
       group.push(object); 
     }); 
    } 
});

console.log(JSON.stringify(canvas.toDatalessJSON()))給出以下輸出：

{ 「對象」：[{」類型「：」基團」，「originX」：「中心」，「originY」：「中心」，「左」：100，「頂部」：100，「寬度」：200，「高度」：200，「填充」：「RGB（0,0,0）」，「overlayFill」：空，「中風」：NULL，「strokeWidth」：1，「strokeDashArray」：NULL，「strokeLineCap」：「對接」，「strokeLineJoin」：「斜切」，「strokeMiterLimit」：10 「將scaleX」：1，「的scaleY」：1，「角度」：0 「flipX」：假「flipY」：假，「不透明性」：1，「影子」：空，「可見」：真「clipTo」：NULL，「對象」：[{ 「類型」：「路徑」，「ORI ginX 「：」中心「」originY「：」中心「，」左「：0，」頂部「：0，」寬度「：200，」高度「：200，」填充「：」＃AA0000「，」 overlayFill 「：空，」中風「：NULL，」 strokeWidth 「：1，」 strokeDashArray 「：NULL，」 strokeLineCap 「：」對接」，「strokeLineJoin」：「斜切」，「strokeMiterLimit」：10 「將scaleX」：1，「的scaleY」：1，「角度」：0 「flipX」：假「flipY」：假，「不透明性」：1，「影子」：空，「可見」：真「clipTo」：NULL，「路徑「：[[」 M」，91.5,73]，[ 「c」的，0，-30,40，-30,40,0]，[ 「c」的，0,30，-40,60，-40， 60]，[ 「c」的，0,0，-40，-30，-40，-60]，[ 「c」的，0，-30,40，-30,40,0]]，「pathOffset」： { 「X」：0，「Y」：0}}]}]，「背景」：「」}

如果我檢查canvas.item(0).sourcePath它給了我heart.svg

的哪些錯誤？

感謝

來源

2013-10-14 Lucky Soni

你的問題是什麼？ – Kienz

@Kienz當我已經設置'sourcePath：url'時，canvas.toDatalessJSON（）是否應該將'url'返回到SVG而不是SVG路徑？ –

您正在使用fabric.Group而不是fabric.Path或fabric.PathGroup。如果您致電canvas.toDatalessJSON()，只有fabric.PathGroup和fabric.Path會用sourcePath網址替換路徑定義。使用該代碼爲您的SVG元素：

fabric.loadSVGFromURL(url, function(objects, options) { 
    // Group elements to fabric.PathGroup (more than 1 elements) or 
    // to fabric.Path 
    var loadedObject = fabric.util.groupSVGElements(objects, options); 
    // Set sourcePath 
    loadedObject.set('sourcePath', url); 

    canvas.add(loadedObject); 
});

在這裏你可以看到的jsfiddle：http://jsfiddle.net/Kienz/526wC/

在你的jsfiddle您使用fabric.Image而不是fabric.Path。

來源

2013-10-24 07:54:27 Kienz

其實，在我的小提琴中，我爲非SVG對象使用'fabric.Image'。對於我使用'fabric.loadSVGFromURL'的SVG對象:) –

它看起來像你fabric.Group對象，而不是fabric.Path設置sourcePath屬性。如果您將sourcePath屬性設置爲您的路徑對象，它應該可以工作。

來源

2013-10-22 12:00:16 Kienz

謝謝。這似乎部分適用於我。當我使用fabric.Path然後SVG是根本不呈現，但當我使用'fabric.PathGroup'的SVG呈現良好，'canvas.DatalessJSON（）'似乎工作正常，但現在我失去了'選擇'SVG對象，以便我可以移動或修改它。 –

@LuckySoni你可以創建一個小jsfiddle的例子。 – Kienz

奇怪..它適用於我在小提琴http://jsfiddle.net/XMwSp/我猜它的'其他代碼'（我省略小提琴保持乾淨）是搞亂。如果您有時間，請查看完整示例http://devhost.in/fab/。非常感謝你。 –

Fabric.js - canvas.toDatalessJSON未按預期

回答

相關問題