我可以在没有 Cufon 的情况下在 Raphael 中使用打印吗?

发布于 2024-10-06 17:52:20 字数 1644 浏览 10 评论 0原文

我正在尝试使用 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);

as记录在此处

当我尝试它时(到目前为止,在 OS X 上的 Chrome 和 Opera 中)我得到:

  • 上绘制一个白色区域,
  • 在灰色椭圆
  • 文本“Raphaël\nkicks\nbutt!”

但我在任何地方都没有看到:“测试字符串”。

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

I am trying to use the print command, mentioned in the documentation for Raphael, to, well, print text with a nice font. [I see that this can be done nicely using the "text" function, and I see examples on the web using fonts generated by Cufon with the print function (as in these examples for 'text' and 'print'), but what I'm doing is as close as I can make it to the example in the documentation and does not work for me, and I'd like to know why.]

Here's my code:

<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>  

The important line is:

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

as documented here.

When I try it (in Chrome and Opera on OS X, so far) I get:

  • a white area to draw on
  • a grey ellipse
  • the text "Raphaël\nkicks\nbutt!"

but I do not see: "Test string" anywhere.

I am using Raphael v 1.4.7 (which I thought was current as of yesterday, but I see that a version 1.5.2 is now out).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

你的笑 2024-10-13 17:52:20

如果没有显式注册字体(通过调用 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() 并指出所需的属性即可。

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

You cannot use print() without explicitly registering a font (by calling registerFont()), and Cufon seems to be the usually way this is done. Cufon allows you to use a custom font. If you want to use standard fonts, you can use text() and set the font properties using the attr() function.


It took me a while to figure out why the example 'print' function didn't work when embedded into my own page. The simple answer is that you can't use the 'print' function without first calling the 'registerFont' function.

If you look carefully at the source of Raphael's reference page, you won't notice the 'registerFont' call they are using because it is embedded in the 'museo.js' page. There you will see the 'registerFont' call. You will also note that they actually use the print function with the 'Museo' font in their print example code, not the 'Times' font.

At this point I realized that the text() function combined with the attr() function would be sufficient for my needs, so I did not look further into Cufon (sorry).

Here is a simple snippet of code that shows how the text() and attr() functions are used to display something in one of the standard fonts.

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

You simply call attr() on the output of the text() function, and indicate the properties you want.

Hope that helps you understand the problem and a possible solution if you do not require your custom font.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文