Question

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

$(".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，” 对象 “：[{” 类型 “：” 路径 “ ”originX“： ”中心“， ”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”：{ “×”：0， “Y”：0 }}]}]， “背景”： “”}

如果我检查canvas.item(0).sourcePath它会给我heart.svg

怎么了？

由于

Answer 1

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

Answer 2

您似乎在sourcePath对象而不是fabric.Group上设置了fabric.Path属性。如果将sourcePath属性设置为路径对象，则应该可以正常工作。

Fabric.js - canvas.toDatalessJSON无法按预期工作

2 个答案: