Рафаэль - Изменение буквы цвета текстовой строки

(с использованием Raphael_2.01, WindowsXP, Firefox8.0.1)Рафаэль - Изменение буквы цвета текстовой строки

Здравствуйте,

Я пытаюсь изменить букву цвет текста со ссылкой на " Текст чертежа " http://www.html5rocks.com/en/tutorials/raphael/intro/.

Я могу отобразить текст «HTML5ROCKS», но я не могу изменить цвет.

var t = paper.text(50, 10, "HTML5ROCKS"); 

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40); 
// I think "Vegur" is Mac font. So I change it to "Courier". 

letters[4].attr({fill:"orange"}); 
for (var i = 5; i < letters.length; i++) { 
    letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"}); 
}

Что случилось?

источник

2011-12-15 Crane

Я уже ответил на этот вопрос здесь: http://stackoverflow.com/a/12176879/569751. Надеюсь, что это поможет. –

Как говорится в учебнике (не так ясно), вам нужно преобразовать шрифт в формат «cufon», если вы хотите рассматривать отдельные буквы как уникальные пути SVG. Если вы это сделаете, функция paper.print работает так, как ожидалось. Без этого функция печати возвращает пустой массив (и «буквы [4]» выходят из строя).

Экспериментально, я схватил два недостающих файлов шрифтов с HTML5ROCKS:

<script src="Vegur.font.js"></script> 
<script src="cufon.js"></script>

и добавили их в образец HTML страницы:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Raphaël—JavaScript Library</title> 
</head> 
<body> 
    <div id="demo-1"></div> 
    <script src="raphael.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/Vegur.font.js" type="text/javascript"></script> 
    <script src="Scripts/cufon.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var paper = Raphael("demo-1", 320, 200); 
      var t = paper.text(50, 10, "HTML5ROCKS"); 
      var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40); 
      letters[4].attr({ fill: "orange" }); 
      for (var i = 5; i < letters.length; i++) { 
       letters[i].attr({ fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D" }); 
      } 
     });   
    </script> 
</body> 
</html>

Второй текст HTML5ROCKS окрашена, как и ожидалось (как показано на исходной странице учебника).

источник

2011-12-19 21:59:24 WiredPrairie

У меня такая же проблема, даже используя файл шрифта cufon (и заменяя Cufon.registerFont на Raphael.registerFont), шрифт отображается, но он не возвращает массив отдельных буквенных путей – gotofritz

Рафаэль - Изменение буквы цвета текстовой строки

ответ

Смежные вопросы