использование библиотеки Рафаэля для рисования выровненного по левому краю текста - PullRequest
4 голосов
/ 17 ноября 2011

Я использую библиотеку JavaScript Рафаэля (http://raphaeljs.com/) для рисования графики в моем веб-приложении. Я попробовал следующий код:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="raphael/raphael.js"></script>
</head>
<body>    
    <script>
        var paper = Raphael(10, 50, 600, 200);            
        paper.text(300, 50, "first very very long line\nshort line").attr(
            {"font-family":"arial", 
            "font-size":"30",
            "text-align":"left"}
            );
    </script>
</body>
</html>

В результате получается изображение с двумя строками текста по центру. Семейство шрифтов css и размер шрифта отображаются правильно. Но выравнивание текста css игнорируется. Почему?

(протестировано с Firefox 8.0 и Chrome 15)

Ответы [ 2 ]

14 голосов
/ 17 ноября 2011

Кажется, что Рафаэль не использует text-align свойство . Вместо этого используйте свойство text-anchor, его возможные значения: start, middle, end или inherit.

В вашем примере используйте это так:

paper.text(300, 50, "first very very long line\nshort line").attr({
    "font-family":"arial", 
    "font-size":"30",
    "text-anchor":"start"
});
3 голосов
/ 17 ноября 2011
paper.text(300, 50, "first very very long line\nshort line").attr(
            {"font-family":"arial", 
            "font-size":"30",
            "text-anchor":"start"}
            );
...