首页 文章

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

提问于
浏览 次
2

这是我如何将图像加载到画布上：

$(".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

怎么了？

谢谢

javascript html5 canvas fabricjs

2 回答

  • 3

    您正在使用 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 .

    回复于
  • 1

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

    回复于

相关问题