Raphael Изменение цвета букв текстовой строки

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

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


text colors letter raphael
person Crane    schedule 15.12.2011    source источник
comment
Я уже ответил на этот вопрос здесь: stackoverflow.com/a/12176879/569751. Надеюсь, это поможет.   -  person Aamir Afridi    schedule 29.08.2012

Ответы (1)


arrow_upward
2
arrow_downward

Как говорится в руководстве (не так ясно, как следовало бы), вам необходимо преобразовать шрифт в формат «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 окрашен, как и ожидалось (как показано на исходной странице руководства).

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