使用Raphael JS将所有SVG文本节点转换为路径节点
我正在尝试编写一个RaphaelJS函数，它将采用Raphael纸张实例中的现有文本节点并将它们转换为路径。
我们的目标是复制文本的位置，大小和属性，与页面上显示的完全一样，但是使用路径代替文本进行渲染。 我最初无法使用Raphael paper.print（）函数渲染文本，因为文本是动态更新的，需要基于“文本”的属性才能这样做。 将现有文本节点转换为路径将作为过程中的“最终”步骤（文本修改完成后）。
我这样做是为了避免安装字体以后查看或处理SVG。
我面临的挑战是：
文本节点可能包含带有x和dy定义的tspans。 创建的路径必须将它与每个childNode字母（tspans）完美匹配。
检索文本节点的实际位置数据，以及每个tspan。 这是我遇到麻烦的地方，希望有更多经验的人可以帮助我。 由于笔画宽度和其他属性会影响定位/ bbox值，因此我不确定什么是获取文本的正确定位数据的最有效方法。
我到目前为止所尝试的：
我的代码简单分解。
我写了一个自定义属性函数textFormat，它将文本格式化为交错排列。 此函数解析文本节点，将其按每个字母分割并添加新行n字符，并调整定位使其看起来错开。
textToPaths函数是一个纸张函数，应该循环遍历纸张节点，并使用Raphael paper.print（）函数将所有找到的文本节点转换为路径。 这是我遇到麻烦的功能。
在这里查看完整的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.
}
完整的代码查看JSFiddle示例
//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');
};
如果有人能帮我解决这个问题，我将不胜感激。 谢谢！
您可以使用Opentype.js将字体转换为SVG / Canvas路径命令。
lib会返回给你一系列的路径绘制命令; 这些用于在HTML5 <canvas>元素上绘图。
但是，使用这些命令构建SVG路径是微不足道的，因为字体转换不包括与Canvas路径绘制兼容的任何命令，这些命令与SVG路径命令不兼容。
链接地址: http://www.djcxy.com/p/76497.html上一篇: Convert all SVG text nodes into path nodes with Raphael JS