使用Raphael's库绘制左对齐文本

using Raphael's-library for drawing left aligned text

本文关键字：绘制 左对齐 文本 Raphael 使用      更新时间：2023-09-26

我使用Raphael的JavaScript库(http://raphaeljs.com/)来绘制一些图形到我的web应用程序中。我尝试了以下代码:

<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 font-family和font-size显示正确。但是css text-align会被忽略。为什么?

(在Firefox 8.0和Chrome 15上测试)

似乎拉斐尔没有使用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"
});

paper.text(300, 50, "first very very long line'nshort line").attr(
            {"font-family":"arial", 
            "font-size":"30",
            "text-anchor":"start"}
            );
相关文章：