我能否在Raphael中使用print而不使用Cufon？

Question

我能否在Raphael中使用print而不使用Cufon？

8

我正在尝试使用Raphael文档中提到的print命令，来打印具有漂亮字体的文本。我发现可以使用"text"函数来完成这个任务，并且在网上看到了一些使用Cufon生成的字体与print函数一起使用的示例（例如这些'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);

如此记录在此处。

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

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

但我没有看到：“Test string”出现在任何地方。

我正在使用Raphael v 1.4.7（我认为昨天是最新版本，但我看到现在有一个版本1.5.2）。

- Clinton Blackmore

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- holcombj · Accepted Answer

如果您想使用print()函数，必须通过调用registerFont()函数明确地注册字体，并且通常使用Cufon来完成。 Cufon允许您使用自定义字体。如果您要使用标准字体，则可以使用text()函数并使用attr()函数设置字体属性。

我花了一些时间才弄清楚为什么示例中的“print”函数在嵌入到我的页面中时无法工作。简单的答案是，您不能在未调用“registerFont”函数的情况下使用“print”函数。

如果您仔细查看 Raphael 参考页面的源代码，您将不会注意到他们使用的“registerFont”调用，因为它被嵌入在“museo.js”页面中。在那里，您将看到“registerFont”调用。您还会注意到，他们实际上在其打印示例代码中使用了“Museo”字体的“print”函数，而不是“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()，并指定您想要的属性。

希望这能帮助您理解问题，并提供可能的解决方案（如果您不需要自定义字体）。