用Raphael JS将所有SVG文本节点转换为路径节点

Question

我面临的挑战是：

>

文本节点可以包括具有x和dy定义的TSPAN。创建的路径必须与每个childNode字母（tspans）完美地对齐。

检索文本节点的实际位置数据，以及每个tspan。这就是我遇到麻烦的地方，希望有更多经验的人能帮助我。由于笔画宽度和其他属性会影响定位/bbox值，所以我不确定为文本获取正确定位数据的最有效方法是什么。

textToPaths函数是一个paper函数，它应该循环遍历paper节点，并使用Raphael paper.print（）函数将所有找到的文本节点转换为path。这就是我遇到麻烦的函数。

在这里查看完整的JSFiddle示例

问题代码
我不确定如何获得准确且一致的x和y值以传递到paper.print()函数中。现在，我正在使用getBoundingClientRect()，但它仍然是关闭的，而且是歪斜的。我的假设是笔画宽度影响了x和y的计算。

        //Loop through each tspan and print the path for each.
        var i,
            children = node.node.childNodes,
            len = children.length;

        for (i = 0; i < len; i++) {
            var tspan = children[i],
                tspanText = tspan.innerHTML,
                x = tspan.getBoundingClientRect().left - node.node.getBoundingClientRect().left,  //How do I get the correct x value?
                y = tspan.getBoundingClientRect().top - node.node.getBoundingClientRect().top;  //How do I get the correcy y value?

            var path = paper.print(x, y, tspanText, font, fontSize),                
                attrs = node.attrs;
            delete attrs.x;
            delete attrs.y;
            path.attr(attrs);
            path.attr('fill', '#ff0000');  //Red, for testing purposes.
        }

//Register Cufon Font
var paper = Raphael(document.getElementById('paper'), '600', '600');

var text1 = paper.text(100, 100, 'abc').attr({fill: 'none',stroke: '#000000',"stroke-width": '12',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text2 = paper.text(100, 100, 'abc').attr({fill: 'none',stroke: '#ffffff',"stroke-width": '8',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text3 = paper.text(100, 100, 'abc').attr({fill: '#000000',stroke: '#ffffff',"stroke-width": '0',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text = paper.set(text1, text2, text3);
text.attr('textFormat', 'stagger');

/* paper.textToPaths
 * Description: Converts all text nodes to paths within a paper.
 *
 * Example: paper.textToPaths();
 */
(function(R) {
    R.fn.textToPaths = function() {
        var paper   = this;

        //Loop all nodes in the paper.
        for (var node = paper.bottom; node != null; node = node.next ) {
            if ( node.node.style.display === 'none' || node.type !== "text" || node.attrs.opacity == "0") continue; //skip non-text and hidden nodes.

            //Get the font config for this text node.
            var text = node.attr('text'),
                fontFamily = node.attr('font-family'),
                fontSize = parseInt(node.attr('font-size')),
                fontWeight = node.attr('font-weight'),
                font = paper.getFont(fontFamily, fontWeight);

            //Loop through each tspan and print the path for each.
            var i,
                children = node.node.childNodes,
                len = children.length;

            for (i = 0; i < len; i++) {
                var tspan = children[i],
                    tspanText = tspan.innerHTML,
                    x = tspan.getBoundingClientRect().left - node.node.getBoundingClientRect().left,  //How do I get the correct x value?
                    y = tspan.getBoundingClientRect().top - node.node.getBoundingClientRect().top;  //How do I get the correcy y value?

                var path = paper.print(x, y, tspanText, font, fontSize),                
                    attrs = node.attrs;
                delete attrs.x;
                delete attrs.y;
                path.attr(attrs);
                path.attr('fill', '#ff0000');  //Red, for testing purposes.
            }

        }

    };
})(window.Raphael);

textToPaths = function() {
    //Run textToPaths
    paper.textToPaths();
};


/* Custom Element Attribute: textFormat 
 * Description: Formats a text element to either staggered or normal text.
 *
 * Example: element.attr('textFormat, 'stagger');
 */
paper.customAttributes.textFormat = function( value ) {
    // Sets the SVG dy attribute, which Raphael doesn't control
    var selector = Raphael.svg ? 'tspan' : 'v:textpath',
        has = "hasOwnProperty",
        $node = $(this.node),
        text = $node.text(),
        $tspans = $node.find(selector);

    console.log('format');

    switch(value)
    {
        case 'stagger' :
            var stagger = function(el) {
                var R = Raphael,
                    letters = '',
                    newline = '\n';

                for (var c=0; c < text.length; c++) {
                    var letter = text[c],
                        append = '';

                    if(c < text.length - 1)
                        append = newline;
                        letters += letter+append;
                    }
                    el.attr('text', letters);
                    var children = el.node.childNodes;

                    var i,
                        a = el.attrs,
                        node = el.node,
                        len = children.length,
                        letterOffset = 0,
                        tspan,
                        tspanHeight,
                        tspanWidth,
                        tspanX,
                        prevTspan,
                        prevTspanRight = 0,
                        tspanDiff = 0,
                        tspanTemp,
                        fontSize,
                        leading = 1.2,
                        tempText;
                    for (i = 0; i < len; i++) {
                        tspan = children[i];
                        tspanHeight = tspan.getComputedTextLength();
                        tspanWidth = tspan.getComputedTextLength();
                        tspanX = tspan.getAttribute('x'),
                        prevTspanRight = tspan.getBoundingClientRect().right

                        if(tspanX !== null)
                        {
                            tspanDiff = tspanDiff + prevTspanRight - tspan.getBoundingClientRect().left;
                            var setX = parseInt(tspanX) + parseInt(tspanDiff);
                            tspan.setAttribute('x', setX);
                            tspan.setAttribute('dy', 15);
                        }
                        prevTspan = tspan;
                    }
                }
                stagger(this);
                break;
            case 'normal' :
                this.attr('text', text);
                break;
            default :
                this.attr('text', text);
                break;
        }

        eve("raphael.attr.textFormat." + this.id, this, value);

        // change no default Raphael attributes
        return {};
    };

staggerText = function() {
    //Run textToPaths
    text.attr('textFormat', 'stagger');
};

如果有人能帮我解决这个问题，我将非常感激。谢谢！

Answer 1

可以使用opentype.js将字体转换为SVG/Canvas路径命令。

lib将返回给您一系列路径绘制命令；这些用于在HTML5 元素上进行绘制。

然而，使用这些命令构建SVG路径是很简单的，因为字体转换不包括任何与画布路径绘制兼容的命令，而这些命令与SVG路径命令不兼容。