fabricjs:使用导出和导入作为svg时的文本对齐问题

Question

将文本导出为SVG并导入到画布后，添加到画布上的文本与其原始文本的对齐方式不同

http://jsbin.com/ruluko/edit?html,js,output

使用fabric js v1.6.0-rc.1

Answer 1

这看起来像fabric的svg解析器中的错误。

如果不是对svg元素进行分组，而是一个接一个地添加它们，就可以看到它：

​

var canvas1 = new fabric.Canvas('c1');
var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = new fabric.Text('fabric', { fill: 'red', left: 100, top: 100 });
canvas1.add(text);
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');

var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  fabric.loadSVGFromString(mysvg, function(objects, options) {
    for (var i = 0; i < objects.length; i++) {
      canvas2.add(objects[i]);
    }
  });
};

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

  <canvas id="c1" width="200" height="200"></canvas>
  <canvas id="c2" width="200" height="200"></canvas>
  <button onclick='doAction()'>Export & Import as SVG</button>

​

正如您在代码片段中看到的，每个元素的框都在错误的坐标上。请注意，loadSVGFromURL()方法也会发生这种情况。

如果您无论如何都要对这些元素进行分组，一种快速的解决方法是将svg绘制为图像：

​

var canvas1 = new fabric.Canvas('c1');

var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = new fabric.Text('fabric', { fill: 'red', left: 100, top: 100 });
canvas1.add(text);
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');


var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(mysvg.split('svg11.dtd">')[1]);
  fabric.Image.fromURL(svgURL, function(oImg) {
    canvas2.add(oImg)
  });
};

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
<button onclick='doAction()'>Export & Import as SVG</button>

​

此解决方法的主要警告是，一旦加载，您将失去修改组的每个路径的能力。

由于该问题是由<tspan>元素引起的，因此更好的修复方法是首先清理您的svg字符串，将所有这些<tspan>替换为<text>元素：

​

var canvas1 = new fabric.Canvas('c1');

var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = 'this is\na multiline\ntext';
var alignedRightText = new fabric.Text(text, {
  textAlign: 'right'
});
canvas1.add(alignedRightText)
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');


var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  fabric.loadSVGFromString(fixSVGText(mysvg), function(objects, options) {
    options.selectable = false;
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas2.add(obj).renderAll();
  });
};

function fixSVGText(str) {
  // parse our string as a DOM object and get the SVGElement
  var svg = new DOMParser().parseFromString(str, "image/svg+xml").documentElement;

  // get all <tspan> elements
  var tspans = svg.querySelectorAll('tspan');
  for (var i = 0; i < tspans.length; i++) {
    var ts = tspans[i],
      parent = ts.parentNode,
      gParent = parent.parentNode;
    var j = 0;

    // create a new SVGTextElement to replace our tspan
    var replace = document.createElementNS('http://www.w3.org/2000/svg', 'text');

    var tsAttr = ts.attributes;
    // set the 'x', 'y' and 'fill' attributes to our new element
    for (j = 0; j < tsAttr.length; j++) {
      replace.setAttributeNS(null, tsAttr[j].name, tsAttr[j].value);
    }

    // append the contentText
    var childNodes = ts.childNodes;
    for (j = 0; j < childNodes.length; j++) {
      replace.appendChild(ts.childNodes[j]);
    }

    var tAttr = parent.attributes;
    // set the original text attributes to our new one
    for (j = 0; j < tAttr.length; j++) {
      replace.setAttributeNS(null, tAttr[j].name, tAttr[j].value);
    }
    // append our new text to the grand-parent
    gParent.appendChild(replace);

    // if this is the last tspan
    if (ts === parent.lastElementChild)
    // remove the old, now empty, SVGTextElement
      gParent.removeChild(parent)
  }
  // return a string version of our cleaned svg
  return new XMLSerializer().serializeToString(svg);
}

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
<button onclick='doAction()'>Export & Import as SVG</button>

​

但最好的解决方案仍然是open a new issue to kangax，并希望这个bug将在未来的版本中得到修复。

Answer 2

我真的很感谢你找到了解决方案穆萨。谢谢。

我注意到，对于多行文本框，这种解决方案只需要抓取最后一行。下面是我从你的代码开始设计的一个解决方案。这种对齐仍然很时髦，但至少这看起来是朝着正确的方向迈出的一步：

function convertTspans(svg) {
    var tspans = svg.match(/<\s*tspan[^>]*>(.*?)<\s*\/\s*tspan>/g);

    var x = null;
    var y = null;
    var groupString = null;
    var matrixString = null;
    var xMatrix = null;
    var yMatrix = null;
    var transformedSvg = svg;

    if (tspans === null) {
        return svg;
    }

    for (var i = 0; i < tspans.length; i++) {
        var tspanString = tspans[i];
        var text = tspanString.replace(/<\s*tspan[^>]*>/g, '');
        var text = text.replace(/<\s*\/tspan[^>]*>/g, '');

        var coordMatch = tspanString.match(/x="(-?\d*\.?\d+)" y="(-?\d*\.?\d+)"/);

        if (coordMatch && coordMatch.length > 2) {
            x = parseFloat(coordMatch[1]);
            y = parseFloat(coordMatch[2]);
        }

        var groupTagMatch = svg.match(/<g transform.*>/);

        if (groupTagMatch) {
            groupString = groupTagMatch[0];

            // groupString is like <g transform="matrix(a b c d e f)" style=""  > where e = xMatrix et f = yMatrix
            var matrixMatch = groupString.match(/matrix\((-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+)\)/);

            if (matrixMatch && matrixMatch.length > 6) {
                matrixString = matrixMatch[0];
                xMatrix = parseFloat(matrixMatch[5]);
                yMatrix = parseFloat(matrixMatch[6]);

                if (x !== null 
                    && y !== null 
                    && xMatrix !== null 
                    && yMatrix !== null 
                    && text !== null 
                    && groupString !== null 
                    && matrixString !== null
                ) {

                    var newMatrixString = 'matrix(' + matrixMatch[1] + ' ' + matrixMatch[2] + ' ' + matrixMatch[3] + ' ' + matrixMatch[4] + ' ' +
                        (x + xMatrix) + ' ' + (y + yMatrix) + ')';

                    transformedSvg = svg
                        .replace(matrixString, newMatrixString)
                        .replace(tspanString, text);

                    console.log('--> svg', svg);
                    console.log('--> transformedSvg', transformedSvg);
                }
            }
        }
    }

    return transformedSvg;
}

Answer 3

根据documentation的说法，在导出SVG时会回调方法toSVG：

使用reviver函数修改SVG输出

因此，一种解决方案是使用此回调在导出过程中删除所有文本，并调整包含<tspan></tspan>标记的组的坐标。当您导出而不是调用canvas.toSVG()时，您将调用canvas.toSVG(null, deleteTspan)。这个解决方案已经在2.4.6版本上进行了测试，对我来说，它工作得很好。

这是一个代码示例，我认为它可以更干净，但它为我做了工作：

function deleteTspan(svg) {
    var tspanTagMatch = svg.match(/<tspan.*>(.*)<\/tspan>/);

    var tspanString = null;
    var text = null;
    var x = null;
    var y = null;
    var groupString = null;
    var matrixString = null;
    var xMatrix = null;
    var yMatrix = null;
    var transformedSvg = svg;
    if (tspanTagMatch && tspanTagMatch.length > 1) {
        text = tspanTagMatch[1];

        tspanString = tspanTagMatch[0];
        var coordMatch = tspanString.match(/x="(-?\d*\.?\d+)" y="(-?\d*\.?\d+)"/);
        if (coordMatch && coordMatch.length > 2) {
            x = parseFloat(coordMatch[1]);
            y = parseFloat(coordMatch[2]);
        }

        var groupTagMatch = svg.match(/<g transform.*>/);
        if (groupTagMatch) {
            groupString = groupTagMatch[0];

            // groupString is like <g transform="matrix(a b c d e f)" style=""  > where e = xMatrix et f = yMatrix
            var matrixMatch = groupString.match(/matrix\((-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+)\)/);
            if (matrixMatch && matrixMatch.length > 6) {
                matrixString = matrixMatch[0];
                xMatrix = parseFloat(matrixMatch[5]);
                yMatrix = parseFloat(matrixMatch[6]);

                if (x !== null && y !== null && xMatrix !== null && yMatrix !== null &&
                    text !== null && tspanString !== null && groupString !== null && matrixString !== null) {

                    var newMatrixString = 'matrix(' + matrixMatch[1] + ' ' + matrixMatch[2] + ' ' + matrixMatch[3] + ' ' + matrixMatch[4] + ' ' +
                        (x + xMatrix) + ' ' + (y + yMatrix) + ')';

                    transformedSvg = svg
                        .replace(matrixString, newMatrixString)
                        .replace(tspanString, text);

                    console.log('--> svg', svg);
                    console.log('--> transformedSvg', transformedSvg);
                }
            }
        }
    }

    return transformedSvg;
}