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

Question

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

(используя 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"});
}

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

1

text colors raphael letter

Источник

user1090932 15 дек '11 в 08:34

1 ответ

Другие вопросы по тегам text colors raphael letter

user95190 19 дек '11 в 21:59 2011-12-19 21:59 · Answer 1 · 2011-12-19 21:59

Как говорится в руководстве (не так ясно, как должно), вам необходимо преобразовать шрифт в формат "cufon", если вы хотите обрабатывать отдельные буквы как уникальные пути SVG. Если вы сделаете это, функция paper.print будет работать как положено. Без этого функция печати возвращает пустой массив (и "letters[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 окрашен, как и ожидалось (как показано на исходной странице учебника).