文字列としてエクスポートした後、テキストを間違ったx位置にしてからloadSVGFromStringからインポートしました

Question

私は、ユーザがfabric.jsを介して異なる形状やテキストをキャンバスに追加できるようにプロジェクトを作成しました。SVGstring別のキャンバスにSVGstringとしてインポートします。

x-axisの位置は、長方形のような通常の形に固執すればうまく動作します。しかし、x-axisの位置は、（fabric.jsで作成された）テキストオブジェクトをエクスポートしてインポートすると不思議なオフセットがあります。

私はこれを作成しました。上部のキャンバスをエクスポートし、キャンバスの下部にインポートするには[保存]をクリックします。長方形は正常に動作します。

x-offsetを追加する理由と修正方法を教えてください。

function saveDrawing() { 
    console.log('Lets Draw'); 
    var drawing = canvas.toSVG(); 
    var showCanvas = new fabric.Canvas('show'); 
    fabric.loadSVGFromString(drawing, function (objects, options) { 
    console.log(objects, options); 
    objects.forEach(function (object) { 
     showCanvas.add(object); 
    }); 
    }); 
} 

Answer 1

わかりましたので、私は、 "ソリューション" 自分自身を発見したように見える：

そのPlunkerからの抜粋は、SOによって要求されます。これは開いていますissue Fabric.jsは長い間持っていました。この問題を回避する1つの方法は、図面のエクスポートとインポートの別の方法を使用することです。元のPlunkerを私のソリューションで更新しました。基本的には、SVGstringではなくJSONをインポート/エクスポートに使用します。