8

我正在尝试使用Raphael 文档中提到的 print 命令来打印带有漂亮字体的文本。[我看到这可以使用“文本”功能很好地完成，我在网络上看到使用由 Cufon 生成的字体和打印功能的示例（如'text' 和 'print' 的这些示例），但我'正在做的与文档中的示例一样接近，但对我不起作用，我想知道为什么。]

这是我的代码：

<html>
    <head>
        <title>Raphael Print Test</title>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function() {
            var paper = new Raphael('holder', 640, 480);
            paper.ellipse(320, 240, 320, 240).attr({stroke: "grey"});
            paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
            paper.text(50, 50, "Raphaël\nkicks\nbutt!");
        }
        </script>
        <style type="text/css">  
            #holder { width: 640px; height: 480px; border: 2px solid #aaa; }  
        </style>  
    </head>  
    <body>  
        <div id="holder"></div>  
    </body>  
</html>

重要的一行是：

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

如此处所述。

当我尝试它时（到目前为止，在 OS X 上的 Chrome 和 Opera 中）我得到：

  • 一个可以绘制的白色区域
  • 一个灰色椭圆
  • 文字“Raphaël\nkicks\nbutt！”

但我在任何地方都看不到：“测试字符串”。

我正在使用 Raphael v 1.4.7（我认为它是昨天的最新版本，但我看到版本 1.5.2 现在已经发布）。

4

1 回答 1

19

如果不显式注册字体（通过调用 registerFont()）就不能使用 print()，而 Cufon 似乎是通常的方式。Cufon 允许您使用自定义字体。如果要使用标准字体，可以使用 text() 并使用 attr() 函数设置字体属性。

我花了一段时间才弄清楚为什么示例“打印”功能在嵌入到我自己的页面时不起作用。简单的答案是，如果不先调用“registerFont”函数，就不能使用“print”函数。

如果您仔细查看 Raphael 参考页面的来源，您不会注意到他们正在使用的“registerFont”调用，因为它嵌入在“ museo.js ”页面中。在那里你会看到'registerFont'调用。您还会注意到，他们实际上在打印示例代码中使用带有“Museo”字体的打印功能，而不是“Times”字体。

此时我意识到 text() 函数与 attr() 函数相结合足以满足我的需求，因此我没有进一步研究 Cufon（对不起）。

这是一个简单的代码片段，它显示了如何使用 text() 和 attr() 函数以一种标准字体显示某些内容。

paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr(
  {"font-family":"serif",
   "font-style":"italic",
   "font-size":"30"});

您只需在 text() 函数的输出上调用 attr()，并指明所需的属性。

如果您不需要自定义字体，希望能帮助您理解问题和可能的解决方案。

于 2011-04-19T10:58:33.503 回答