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()))次の出力が得られます。

{"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,"不透明度": 1,"shadow":null,"visible":true,"clipTo":null,"objects":[{"type":"path","originX":"center","originY":"center", "左":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,-4​​0,60,-40,60],["c",0,0,-40,-30,-4​​0,- 60],["c",0,-30,40,-30,40,0]],"pathOffset":{"x":0,"y":0}}]}],"背景": ""}:200,"fill":"#aa0000","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"マイター","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,-4​​0,60,-40,60],["c",0,0,-40,-30,-4​​0,-60],["c",0,-30,40 ,-30,40,0]],"pathOffset":{"x":0,"y":0}}]}],"背景":""}:200,"fill":"#aa0000","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"マイター","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,-4​​0,60,-40,60],["c",0,0,-40,-30,-4​​0,-60],["c",0,-30,40 ,-30,40,0]],"pathOffset":{"x":0,"y":0}}]}],"背景":""}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,-4​​0,60,-40,60],["c",0,0 ,-40,-30,-4​​0,-60],["c",0,-30,40,-30,40,0]],"pathOffset":{"x":0,"y": 0}}]}],"背景":""}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,-4​​0,60,-40,60],["c",0,0 ,-40,-30,-4​​0,-60],["c",0,-30,40,-30,40,0]],"pathOffset":{"x":0,"y": 0}}]}],"背景":""}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,-4​​0,60,-40,60 ],["c",0,0,-40,-30,-4​​0,-60],["c",0,-30,40,-30,40,0]],"パスオフセット":{ "x":0,"y":0}}]}],"背景":""}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,-4​​0,60,-40,60 ],["c",0,0,-40,-30,-4​​0,-60],["c",0,-30,40,-30,40,0]],"パスオフセット":{ "x":0,"y":0}}]}],"背景":""}y":0}}]}],"背景":""}y":0}}]}],"背景":""}

私がチェックするcanvas.item(0).sourcePathと、それは私に与えますheart.svg

どうしたの？

ありがとう

4

2 に答える 2

1

の代わりsourcePathにオブジェクトに属性を設定しているようです。属性をパスオブジェクトに設定すると、機能するはずです。fabric.Groupfabric.PathsourcePath

于 2013-10-22T12:00:16.853 に答える