2010-12-09 1 views
8

Я пытаюсь использовать команду печати, упомянутую в documentation for Raphael, чтобы напечатать текст с хорошим шрифтом. [Я вижу, что это можно сделать красиво, используя функцию «текст», и я вижу примеры в Интернете, используя шрифты, сгенерированные Cufon, с функцией печати (как в этих examples for 'text' and 'print'), но то, что я делаю, так же близко, как и я может сделать это к примеру, в документации и не работает для меня, и я хотел бы знать, почему]Могу ли я использовать печать в Рафаэле без Cufon?

Вот мой код:.

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

Когда я пытаюсь его (в Chrome и Opera на OS X, до сих пор) я получаю:

  • белая область для рисования на
  • серый эллипс
  • текст «Рафаель \ nkicks \ nbutt!»

но я не вижу: «тестовая строка» в любом месте.

Я использую Raphael v 1.4.7 (который, как я думал, был вчерашним, но я вижу, что версия 1.5.2 теперь отсутствует).

ответ

20

Вы не можете использовать функцию print() без явной регистрации шрифта (путем вызова registerFont()), и Cufon, как правило, делается так, как это делается. Cufon позволяет использовать пользовательский шрифт. Если вы хотите использовать стандартные шрифты, вы можете использовать text() и установить свойства шрифта с помощью функции attr().


Мне потребовалось некоторое время, чтобы выяснить, почему пример функции «печать» не работал, когда встроен в мою собственную страницу. Простой ответ заключается в том, что вы не можете использовать функцию «print» без первого вызова функции «registerFont».

Если вы внимательно изучите источник справочной страницы Рафаэля, вы не заметите, что вызов «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"}); 

Вы просто вызываете attr() на выходе функции text() и указываете нужные свойства.

Надеемся, что вам поможет понять проблему и возможное решение, если вам не нужен ваш собственный шрифт.

+1

Решил мою проблему. Это также работает с веб-шрифтами google. – bennedich 2011-07-30 17:02:31