2010-12-09 15 views
8

Ich versuche, den Druckbefehl zu verwenden, der in der documentation for Raphael erwähnt wird, um, gut, Text mit einer netten Schriftart zu drucken. [Ich sehe, dass dies schön mit der "Text" -Funktion gemacht werden kann, und ich sehe Beispiele im Web mit Schriften von Cufon mit der Druckfunktion erzeugt (wie in diesen examples for 'text' and 'print'), aber was ich mache, ist so nah wie ich kann es in der Dokumentation zum Beispiel machen und für mich nicht funktioniert, und ich würde wissen, warum mag]Kann ich in Raphael ohne Cufon drucken?

Hier ist mein 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> 

die wichtige Zeile ist:

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30); 

as documented here.

Wenn ich es versuchen (in Chrome und Opera auf OS X, bisher) erhalte ich:

  • eine weiße Fläche zeichnen auf
  • eine graue Ellipse
  • der Text „Raphaël \ nkicks \ nbutt! "

aber ich sehe nicht: "Test String" überall.

Ich benutze Raphael v 1.4.7 (die ich dachte, war gestern wie gestern, aber ich sehe, dass eine Version 1.5.2 ist jetzt out).

Antwort

20

Sie können print() nicht verwenden, ohne explizit eine Schriftart zu registrieren (indem Sie registerFont() aufrufen), und Cufon scheint die übliche Methode zu sein. Cufon ermöglicht Ihnen die Verwendung einer benutzerdefinierten Schriftart. Wenn Sie Standardschriftarten verwenden möchten, können Sie text() verwenden und die Schrifteigenschaften mit der Funktion attr() festlegen.

Es hat eine Weile gedauert, bis ich herausgefunden habe, warum die Beispielfunktion 'print' nicht funktionierte, wenn sie in meine eigene Seite eingebettet war. Die einfache Antwort ist, dass Sie die 'print' Funktion nicht benutzen können, ohne vorher die 'registerFont' Funktion aufzurufen.

Wenn Sie sich die Quelle von Raphaels Referenzseite genau ansehen, werden Sie den von ihnen verwendeten 'registerFont'-Aufruf nicht bemerken, da dieser in die' museo.js'-Seite eingebettet ist. Dort sehen Sie den 'registerFont' Anruf. Sie werden auch bemerken, dass sie tatsächlich die Druckfunktion mit der Schriftart "Museo" in ihrem gedruckten Beispielcode verwenden, nicht die Schriftart "Times".

An diesem Punkt erkannte ich, dass die text() - Funktion in Kombination mit der attr() -Funktion für meine Bedürfnisse ausreichend wäre, so dass ich nicht weiter in Cufon (sorry) schaute.

Hier ist ein einfacher Codeschnipsel, der zeigt, wie die text() - und attr() -Funktionen verwendet werden, um etwas in einer der Standardschriftarten anzuzeigen.

paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr(
    {"font-family":"serif", 
    "font-style":"italic", 
    "font-size":"30"}); 

Sie rufen einfach attr() auf den Ausgang des Textes() Funktion, und geben Sie die gewünschten Eigenschaften.

Hoffnung, die Ihnen hilft, das Problem und eine mögliche Lösung zu verstehen, wenn Sie Ihre benutzerdefinierte Schriftart nicht benötigen.

+1

Mein Problem gelöst. Dies funktioniert auch mit Google Web Fonts. – bennedich

+0

Könnten Sie Google Web Fonts mit r.print verwenden? Darf ich wissen wie? Ich stehe hier vor dem gleichen Problem –