Можно ли использовать принт в Рафаэле без Куфона? - PullRequest
Новая
       31

Можно ли использовать принт в Рафаэле без Куфона?

8 голосов
/ 09 декабря 2010

Я пытаюсь использовать команду печати, упомянутую в документации для Рафаэля , для печати текста хорошим шрифтом.[Я вижу, что это можно сделать красиво, используя функцию «текст», и я вижу примеры в Интернете, используя шрифты, сгенерированные 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);

, как описано здесь .

Когда я пытаюсь это сделать (в Chrome и Opera на ОСХ, пока) Я получаю:

  • белую область для рисования на
  • серый эллипс
  • текст "Raphaël \ nkicks \ nbutt!"

но я не вижу: "Тестовая строка" нигде.

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

1 Ответ

19 голосов
/ 19 апреля 2011

Вы не можете использовать 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 () и указываете нужные свойства.

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

...