Могу ли я использовать печать в Raphael без Cufon?

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

  • белая область для рисования
  • серый эллипс
  • текст "Рафаэль\nпинает\nзадницу!"

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

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


javascript raphael cufon
person Clinton Blackmore    schedule 09.12.2010    source источник

Ответы (1)


arrow_upward
19
arrow_downward

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

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

person holcombj    schedule 19.04.2011
comment
Не могли бы вы использовать веб-шрифты Google с r.print? Могу я узнать как? Я сталкиваюсь с той же проблемой здесь - person Nylon Smile; 23.08.2011