我可以在没有Cufon的拉斐尔使用印刷品吗？ [英] Can I use print in Raphael without Cufon?
问题描述
我正在尝试使用 Raphael的文档中提到的print命令，以及用漂亮的字体打印文本。 [我看到这可以通过文本功能很好地完成，我在网上看到使用Cufon生成的字体和打印功能的例子（如这些'text'和'print'的例子），但我正在做的就是尽可能接近我在文档中的示例，并且不适合我，我想知道原因。]
这是我的代码：
< HTML>
< head>
< title>拉斐尔打印测试< / title>
< script src =raphael.jstype =text / javascriptcharset =utf-8>< / script>
< script type =text / javascriptcharset =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\ nnkicks \\\
butt！）;
}
< / script>
< style type =text / css>
#holder {width：640px;身高：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\\\
kicks\\\
butt！
但我没有看到：测试字符串。
我正在使用Raphael v 1.4.7（我认为它是昨天的最新版本，但我看到版本1.5.2现已用完）。
你不能在没有显式注册字体的情况下使用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\\\
kicks\\\
butt！）。attr（
{font-family：serif，
font-style：斜体，
font-size：30}）;
你只需在text（）函数的输出上调用attr（），并指出你的属性希望。
如果您不需要自定义字体，希望能帮助您理解问题和可能的解决方案。
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);
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).
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.
这篇关于我可以在没有Cufon的拉斐尔使用印刷品吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
