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未按预期

回答

相关问题