Raphaeljs Substring Текстовые атрибуты - PullRequest
Новая
       0

Raphaeljs Substring Текстовые атрибуты

2 голосов
/ 25 октября 2011

Мне было интересно, возможно ли изменить атрибуты подстроки текстового объекта в Рафаэле. Например, я хочу выделить слово «волшебник» в следующей строке: «Волшебный волшебник правит миром!» в текстовом объекте Рафаэля. Я рассмотрел использование метода Raphael.print (), и мне нужны некоторые атрибуты из текста для других частей кода.

Ответы [ 2 ]

4 голосов
/ 25 октября 2011

Шрифты устанавливаются на уровне элемента, как и в обычном HTML. Чтобы применить отдельный шрифт или стиль к определенному слову, вам нужно разбить текст на отдельные элементы. 

var start = paper.text(20, 20, "The magical ");
start.attr({ "text-anchor": "start" });
var startBox = start.getBBox();
var bold = paper.text(startBox.width + startBox.x, 20, "wizard ");
bold.attr({ "text-anchor": "start", "font-weight": "bold" });
var boldBox = bold.getBBox();
var end = paper.text(boldBox.width + boldBox.x, 20, "ruled the world!");
end.attr({ "text-anchor": "start" });
2 голосов
/ 27 августа 2012

Проблема с решением с помощью gilly3 заключается в том, что координата x элементов является абсолютной.При изменении текста, например bold.attr({"text":"sorcerer"}), элементы будут перекрываться.

Альтернативное решение - создать текстовый элемент из пользовательских элементов tspan с относительным позиционированием.Это также немного чище с точки зрения объектной модели.Тем не менее, это требует некоторых прямых манипуляций с текстовым элементом.Код: 

var content = paper.text(20, 20, "The magical").attr({ "text-anchor": "start" });

var txt1=Raphael._g.doc.createTextNode(" wizard ");
var txt2=Raphael._g.doc.createTextNode("ruled the world!");

var svgNS = "http://www.w3.org/2000/svg";
var ts1 = Raphael._g.doc.createElementNS(svgNS, "tspan");
var ts2 = Raphael._g.doc.createElementNS(svgNS, "tspan");

ts1.setAttribute("font-weight","bold");
ts1.appendChild(txt1);
ts2.appendChild(txt2);

content.node.appendChild(ts1);
content.node.appendChild(ts2);

content.node.children[1].textContent=" sorcerer ";

Отказ от ответственности: Рафаэль может изменить относительное положение tspans при изменении x,y,dx,dy родительского элемента, даже если сам svg может с этим справиться.Вместо этого можно использовать строку преобразования.Пример: 

content.node.setAttribute("x",500); //works
content.attr({"x":500});  //undesired result
content.transform("t100");   //works
...