Fabric.js - canvas.toDatalessJSON 未按预期工作答案

【问题标题】：Fabric.js - canvas.toDatalessJSON not working as expectedFabric.js - canvas.toDatalessJSON 未按预期工作
【发布时间】：2013-10-22 14:10:20
【问题描述】：

这就是我将图像加载到画布上的方式：

$(".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())) 给出以下输出：

{"objects":[{"type":"group","originX":"center","originY":"center","left":100,"top":100,"width": 200,"height":200,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap" :"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false," opacity":1,"shadow":null,"visible":true,"clipTo":null,"objects":[{"type":"path","originX":"center","originY":" center","left":0,"top":0,"width":200,"height":200,"fill":"#aa0000","overlayFill":null,"stroke":null,"strokeWidth ":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0, "flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"path":[["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

怎么了？

谢谢

【问题讨论】：

@Kienz 当我已经设置 sourcePath: url 时，canvas.toDatalessJSON() 不应该将 url 返回到 SVG 而不是 SVG 路径？

标签： javascript html canvas fabricjs

【解决方案1】：

您使用的是fabric.Group，而不是fabric.Path 或fabric.PathGroup。如果您正在调用 canvas.toDatalessJSON()，则只有 fabric.PathGroup 和 fabric.Path 将路径定义替换为 sourcePath url。将该代码用于您的 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。

【讨论】：

实际上，在我的小提琴中，我将 fabric.Image 用于非 SVG 对象。对于 SVG 对象，我使用了 fabric.loadSVGFromURL :)

【解决方案2】：

看起来您在fabric.Group 对象上设置了sourcePath 属性，而不是fabric.Path。如果将 sourcePath 属性设置为路径对象，它应该可以工作。

【讨论】：

谢谢。这似乎对我有部分作用。当我使用 fabric.Path 时，SVG 根本不会渲染，但是当我使用 fabric.PathGroup 时，SVG 渲染得很好，canvas.DatalessJSON() 似乎工作正常，但现在我失去了select SVG 对象的能力，所以我可以移动或修改它。
@LuckySoni 你能创建一个小的 jsfiddle 例子吗？
奇怪.. 它在小提琴中对我有用jsfiddle.net/XMwSp 我猜它的“其他代码”（我在小提琴中省略了它以保持事情干净）很乱。如果您有时间，请查看完整示例 devhost.in/fab。非常感谢。