Импорт SVG в Fabric.js работает неправильно

Я создаю форму SVG и экспортирую ее в базу данных. jsfiddle для этого здесь - http://jsfiddle.net/rafi_ccj/MASeK/1/

И код ниже.

HTML-часть:

<button id="make_svg">toSVG</button>
<div id="canvas-wrapper">
    <canvas id="canvas" width="400px" height="200px"></canvas>
</div>

Javascript-часть:

var canvas = new fabric.Canvas('canvas');


canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    angle: 0,
    fill: 'rgba(23,23,125,0.5)',
    strokeWidth: 0.1,
    stroke: '#FF0000',
    width: 200,
    height: 200,
    opacity: 1
}));
canvas.add(new fabric.Circle({
    left: 100,
    top: 100,
    fill: 'rgba(45, 255, 34, 0.5)',
    strokeWidth: 0.1,
    stroke: '#FF0000',
    radius: 100,
    opacity: 1
}));

$("#make_svg").click(function () {
    canvas_data = canvas.toSVG();
    console.log(canvas_data);
});

а затем я импортирую этот svg в холст, но это не то же самое, что я создал. jsfiddle находится здесь - http://jsfiddle.net/rafi_ccj/2vtz2/

и код ниже---

HTML-часть

<div id="canvas-wrapper">
    <canvas id="canvas" width="900px" height="800px"></canvas>
</div>

часть javascript здесь -

var canvas = new fabric.Canvas('canvas');

var canvas_data = '<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="200" xml:space="preserve"><desc>Created with Fabric.js 1.1.8</desc><defs></defs><rect x="-100" y="-100" rx="0" ry="0" width="200" height="200" style="stroke: #FF0000; stroke-width: 0.1; stroke-dasharray: ; fill: rgba(23,23,125,0.5); opacity: 1;" transform="translate(100 100)"/><circle cx="0" cy="0" r="100" style="stroke: #FF0000; stroke-width: 0.1; stroke-dasharray: ; fill: rgba(45, 255, 34, 0.5); opacity: 1;" transform="translate(100 100)"/></svg> ';

fabric.loadSVGFromString(canvas_data, function (objects, options) {
    var loadedObject = fabric.util.groupSVGElements(objects, options);

    loadedObject.set({
        left: 400,
        top: 200
    });
    loadedObject.setCoords();
    canvas.add(loadedObject);
    canvas.calcOffset();
});

я также заметил, что если я использую треугольник, он отсутствует после импорта, он просто исчезает.

может ли кто-нибудь помочь мне в этой проблеме?


fabricjs
person rafi    schedule 24.04.2013    source источник
comment
@kangax может быть, это ошибка, которая до сих пор не исправлена   -  person rafi    schedule 24.04.2013

Ответы (1)


arrow_upward
3
arrow_downward

Я решил эту проблему, сделав все объекты элементом группы, и после создания группы с этими объектами, существующими на холсте, я сохранил ее с расширением svg на устройстве, а также в формате json в базе данных. Код ниже-

var group = new fabric.Group([],{
      left: 200,
      top: 200
 });

 var canvas_item = canvas.item(0), x = 0;
 while (canvas_item != undefined) {
      group.addWithUpdate(canvas_item);
      x += 1;
      canvas_item = canvas.item(x);
 }
 canvas.clear();
 canvas.add(group);
 //then use canvas.toDatalessJSON(); and save it to database. while importing this data //use following codes

 var canvas_data = JSON.stringify(canvas.toDatalessJSON());

 canvasJSONdata = JSON.stringify(canvas.toDatalessJSON());
 var stringifiedCanvasJSONdata = JSON.parse(canvasJSONdata,'');
 var base_64 = canvas.toDataURL('png');

и теперь он работает идеально! Хотя я столкнулся со многими проблемами, я многому научился, мне это понравилось! Надеюсь, это решение когда-нибудь поможет кому-нибудь.

person rafi    schedule 26.05.2013