Я пытаюсь написать RaphaelJS функцию, которая будет принимать существующие текстовые узлы в документе Рафаэля и преобразовать их в пути.
Цель состоит в том, чтобы реплицировать позицию, размер и атрибут текста точно так, как он отображается на странице, но визуализировать его с использованием путей вместо текста. Я не могу изначально сделать текст с помощью функции Raphael paper.print(), потому что текст обновляется динамически и для этого требуются атрибуты на основе текста. Преобразование существующих текстовых узлов в пути будет происходить как "окончательный" шаг в этом процессе (после завершения изменений текста).
Я делаю это, чтобы исключить необходимость установки шрифтов для просмотра или обработки SVG позже.
Проблемы, с которыми я сталкиваюсь:
-
Текстовые узлы могут включать в себя tspans с определениями
x
иdy
. Созданные пути должны выровнять его по буквам каждой из букв childNode (tspans). -
Получение фактических данных положения текста node и каждого tspan. Здесь я испытываю проблемы, и, надеюсь, кто-то с большим опытом может мне помочь. Поскольку ширина штрихов и другие атрибуты влияют на значения позиционирования /bbox, я не уверен, какой наиболее эффективный метод получения правильных данных позиционирования для текста.
Что я пробовал до сих пор:
Простая разбивка моего кода.
Я написал пользовательскую функцию атрибута textFormat, которая форматирует текст в шахматном порядке. Эта функция анализирует текст node, разбивает его на каждую букву, добавляя новый символ строки \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');
};
Если кто-нибудь может помочь мне решить эту проблему, я был бы очень признателен. Спасибо!