Cli*_*ore 8 javascript raphael cufon
我正在尝试使用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中,到目前为止),我得到:
但我没有看到:"测试字符串"在任何地方.
我正在使用Raphael v 1.4.7(我认为它是昨天的最新版本,但我看到版本1.5.2现在已经出来了).
小智 19
你不能在没有显式注册字体的情况下使用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(),并指出所需的属性.
如果您不需要自定义字体,希望能帮助您理解问题和可能的解决方案.