¿Puedo usar imprimir en Raphael sin Cufon?

Estoy tratando de usar el comando de impresión, mencionado en el documentation for Raphael, para, así, imprimir texto con una fuente agradable. [Veo que esto se puede hacer muy bien usando la función "texto", y veo ejemplos en la web usando fuentes generadas por Cufon con la función de impresión (como en estos examples for 'text' and 'print'), pero lo que estoy haciendo es lo más cercano que puedo puede hacer que sea al ejemplo de la documentación y no funciona para mí, y me gustaría saber por qué]¿Puedo usar imprimir en Raphael sin Cufon?

Aquí está mi código:.

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

la línea importante es:

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

as documented here.

Cuando lo intento (en Chrome y Opera en OS X, hasta el momento) me sale:

un área blanca para dibujar en
una elipse gris
el texto "Raphaël \ nkicks \ nbutt! "

pero no veo: "Prueba de cadena" en cualquier lugar.

Estoy usando Raphael v 1.4.7 (que pensé que era actual desde ayer, pero veo que una versión 1.5.2 ya está disponible).

Fuente

2010-12-09 Clinton Blackmore

No se puede usar print() sin registrar explícitamente una fuente (llamando a registerFont()), y parece que Cufon es la forma habitual de hacerlo. Cufon le permite usar una fuente personalizada. Si desea utilizar fuentes estándar, puede usar texto() y establecer las propiedades de la fuente con la función attr().

Me llevó un tiempo averiguar por qué la función de 'impresión' de ejemplo no funcionaba cuando estaba integrada en mi propia página. La respuesta simple es que no puede usar la función 'imprimir' sin llamar primero a la función 'registerFont'.

Si mira cuidadosamente el origen de la página de referencia de Rafael, no notará la llamada 'registerFont' que están utilizando porque está incrustada en la página 'museo.js'. Allí verá la llamada 'registerFont'. También notará que realmente usan la función de impresión con la fuente 'Museo' en su código de ejemplo de impresión, no la fuente 'Times'.

En este punto me di cuenta de que la función de texto() combinada con la función attr() sería suficiente para mis necesidades, así que no busqué más en Cufon (lo siento).

Aquí hay un fragmento de código simple que muestra cómo se usan las funciones text() y attr() para mostrar algo en una de las fuentes estándar.

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

Simplemente llame a attr() en la salida de la función de texto(), e indique las propiedades que desea.

Espero que lo ayude a comprender el problema y una posible solución si no necesita su fuente personalizada.

Fuente

2011-04-19 10:58:33 holcombj

Ha solucionado mi problema. Esto también funciona con las fuentes web de Google. – bennedich

¿Podría usar las fuentes web de Google con r.print? ¿Puedo saber cómo? Estoy enfrentando el mismo problema aquí –

¿Puedo usar imprimir en Raphael sin Cufon?

Respuesta

Cuestiones relacionadas