Question

我正在尝试使用documentation for Raphael中提到的打印命令来打印带有漂亮字体的文本。 [我看到这可以很好地使用“文本”功能完成，我在网上看到使用Cufon生成的字体和打印功能的例子（如这些examples for 'text' and '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);

as documented here

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

要绘制的白色区域
灰色椭圆
文字“Raphaël\ nkicks \ nbutt！”

但我没有看到：“测试字符串”。

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

Answer 1

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

我花了一段时间才弄清楚为什么示例'print'函数在嵌入到我自己的页面时不起作用。简单的答案是，如果不先调用'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（），并指出你想要的属性。

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

我可以在没有Cufon的拉斐尔使用印刷品吗？

1 个答案: