Descarga zfont - Descarga del código fuente zfont

zfont

Descarga de fuentes

1.0.0

Descargar

Zfont

¡Un complemento de texto para el motor ZDOG 3D! Renders TrueType Fonts a través de typr.js | jaames.github.io/zfont

Características

Construido sobre Typr.JS, que admite una amplia gama de fuentes .ttf y .otf con velocidad y gracia
Menos de 14 kb minificado y gzipped
No es necesario preocuparse por esperar a que se carguen las fuentes; El texto aparece automáticamente en la existencia una vez que la fuente está lista
Incluye soporte para texto multilínea
Actualizar fuente, texto, color, alineación, etc. en cualquier momento
¡Utilidades de bonificación para medir texto, esperando la carga de fuentes y más!

Advertencias

Tienes que proporcionar un .ttf para usarte tú mismo; No es posible usar fuentes del sistema
El rango de personajes se limita a los glifos que sean compatibles con la fuente elegida, y las pilas/frasts de fuentes aún no son compatibles con

Manifestación

Aquí se puede encontrar una demostración en vivo, ¡también hay algunos ejemplos más profundos en CodePen!

Instalación

Instalar con NPM

$ npm install zfont --save

Si está utilizando un módulo Bundler como Webpack o Rollup, importe ZFont en su proyecto:

 // Using ES6 module syntax
import Zfont from 'zfont' ;

// Using CommonJS modules
const Zfont = require ( 'zfont' ) ;

Usando el jsdelivr cdn

 < script src =" https://cdn.jsdelivr.net/npm/zfont/dist/zfont.min.js " > </ script >

Cuando se incluya manualmente la biblioteca como esta, estará disponible a nivel mundial en window.Zfont

Descargue y organice usted mismo

Versión de desarrollo
Sin comprimir a alrededor de 75 kb, con comentarios de origen incluidos

Versión de producción
Minificado a 45 kb

Luego agréguelo a la <head> de su página con una etiqueta <script> :

 < html >
  < head >
    <!-- ... -->
    < script src =" ./path/to/zfont.min.js " > </ script >
  </ head >
  <!-- ... -->
</ html >

Uso

Registrar complemento

Después de que tanto ZDOG como ZFONT se hayan importado/descargado, necesitamos inicializar el complemento ZFONT. Una vez que se inicialice, las clases de Zdog.Font , Zdog.Text y Zdog.TextGroup estarán disponibles:

 Zfont . init ( Zdog ) ;

Hola Mundo

(¡Pssst! Si prefiere bucear, consulte la demostración básica en CodePen)

Para dibujar algún texto en una escena de Zdog, primero necesitamos configurar un nuevo objeto Zdog.Font con la URL .ttf para nuestra fuente deseada, luego podemos crear un nuevo objeto Zdog.Text y agregarlo a la ilustración como cualquier otra forma:

 // Initialize Zfont
Zfont . init ( Zdog ) ;


// Create a Zdog illustration
let illo = new Zdog . Illustration ( {
  element : '.zdog-canvas'
} ) ;

// Set up a font to use
let myFont = new Zdog . Font ( {
  src : './path/to/font.ttf'
} ) ;

// Create a text object
// This is just a Zdog.Shape object with a couple of extra parameters!
new Zdog . Text ( {
  addTo : illo ,
  font : myFont ,
  value : 'Hey, Zdog!' ,
  fontSize : 64 ,
  color : '#fff'
} ) ;

// Animation loop
function animate ( ) {
  illo . updateRenderGraph ( ) ;
  requestAnimationFrame ( animate ) ;
}
animate ( ) ;

Texto multilínea

Tanto Zdog.Text como Zdog.TextGroup soportan el texto multiline, insertando un carácter nuevo ( n ) donde desee agregar un descanso de línea:

 new Zdog . Text ( {
  ...
  value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ;

Para una mejor legibilidad, es posible que prefiera usar una matriz de cadenas para la opción value . En este caso, cada cadena en la matriz será tratada como una línea separada de texto:

 new Zdog . Text ( {
  ...
  value : [
    'The quick brown fox'
    'jumps over the' ,
    'lazy zdog'
  ]
} ) ;

Esperando que las fuentes se carguen

En la mayoría de los casos, no tiene que preocuparse por esperar a que se carguen las fuentes, ya que los objetos de texto surgen mágicamente una vez que su fuente esté lista para usar. Sin embargo, el complemento también proporciona una función de utilidad Zdog.waitForFonts() Si necesita retrasar algo hasta que todas las fuentes de su escena hayan terminado de cargar.

Por ejemplo, modificemos el bucle de animación del ejemplo anterior para que no comience hasta que las fuentes estén listas:

 // Animation loop
function animate ( ) {
  illo . updateRenderGraph ( ) ;
  requestAnimationFrame ( animate ) ;
}
// Zdog.waitForFonts() returns a Promise which is resolved once all the fonts added to the scene so far have been loaded
Zdog . waitForFonts ( ) . then ( ( ) => {
  // Once the fonts are done, start the animation loop
  animate ( ) ;
} )

API

Zdog.font

Representa una fuente que puede ser utilizada por una instancia de Zdog.Text o Zdog.TextGroup .

 let font = new Zdog . Font ( {
  src : './path/to/font.ttf'
} )

Opción

Parámetro	Detalles	Por defecto
`src`	Ruta de la URL de fuente. Esto puede ser una fuente `.ttf` o `.otf` , consulte el repositorio de typr.js para obtener más detalles sobre el soporte de fuentes	`''`

Métodos

`measureText(text, fontSize)`

Obtenga las medidas para el text de la cadena especificado cuando se renderiza en fontSize (medido en píxeles), similar al CanvasRenderingContext2D.measureText() .

Devuelve un objeto con width , height , descender , ascender .

`getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom')`

Devuelve una matriz de comandos de ruta ZDOG para el text de cadena especificado, cuando se renderiza en fontSize (medido en píxeles).

( x , y , z ) es el punto de origen del camino
alignX es la alineación del texto horizontal (equivalente a la propiedad de text-align CSS); ya sea "left" , "center" o "right" .
alignY es la alineación del texto vertical; "top" , "middle" o "bottom".

`waitForLoad()`

Devuelve una promesa que se resuelve una vez que esta fuente ha terminado de cargarse.

Zdog.text

Un objeto utilizado para representar texto. Hereda todo desde la clase Zdog.Shape .

 new Zdog . Text ( {
  addTo : illo ,
  font : font ,
  value : 'Hey, Zdog!' ,
  textAlign : 'center' ,
  textBaseline : 'middle' ,
  color : '#5222ee' ,
  stroke : 1 ,
} )

Opción

Zdog.Text hereda todas las opciones de la clase Zdog.Shape , más un par de extras:

Parámetro	Detalles	Por defecto
`font`	`Zdog.Font` para usar para este texto. Esto es necesario.	`null`
`value`	Cadena de texto	`''`
`fontSize`	Tamaño de texto, medido en píxeles	`64`
`textAlign`	Alineación de texto horizontal, equivalente a la propiedad `text-align` CSS. Esto puede ser `'left'` , `'center'` o `'right'`	`'left'`
`textBaseline`	Alineación de texto vertical, equivalente a la propiedad `textBaseline` de lienzo HTML5. Esto puede ser `'top'` , `'middle'` o `'bottom'`	`'bottom'`

Propiedades

Zdog.Text hereda todas las propiedades de la clase Zdog.Shape , así como algunos extras. Todas estas propiedades se pueden actualizar en cualquier momento y el texto representado se actualizará automáticamente.

`font`

La instancia de Zdog.Font se usa para este texto.

`value`

Valor de texto como una cadena.

`fontSize`

Tamaño de fuente, medido en píxeles.

`textAlign`

Alineación de texto horizontal, equivalente a la propiedad text-align CSS. Esto puede ser 'left' , 'center' o 'right'

`textBaseline`

Alineación de texto vertical, equivalente a la propiedad textBaseline de lienzo HTML5. Esto puede ser 'top' , 'middle' o 'bottom'

Zdog.textgroup

Esta clase es muy similar a Zdog.Text , excepto que actúa como un Zdog.Group ., y cada glifo de texto se representa como su propia forma. Esto es útil para casos de uso más avanzados en los que necesita control sobre cada personaje.

 new Zdog . TextGroup ( {
  addTo : illo ,
  font : font ,
  value : 'Hey, Zdog!' ,
  textAlign : 'center' ,
  color : '#5222ee' ,
  stroke : 2 ,
} )

Opción

Zdog.TextGroup hereda todas las opciones de la clase Zdog.Group , más algunos extras:

Parámetro	Detalles	Por defecto
`font`	`Zdog.Font` para usar para este texto. Esto es necesario.	`null`
`value`	Cadena de texto	`''`
`fontSize`	Tamaño de texto, medido en píxeles	`64`
`textAlign`	Alineación de texto horizontal, equivalente a la propiedad `text-align` CSS. Esto puede ser `'left'` , `'center'` o `'right'`	`'left'`
`textBaseline`	Alineación de texto vertical, equivalente a la propiedad `textBaseline` de lienzo HTML5. Esto puede ser `'top'` , `'middle'` o `'bottom'`	`'bottom'`
`color`	Color de texto	`#333`
`fill`	Llena de texto	`false`
`stroke`	Golpe de texto	`stroke`

Propiedades

Zdog.TextGroup hereda todas las propiedades de la clase Zdog.Group , así como algunos extras. Todas estas propiedades se pueden actualizar en cualquier momento y el texto representado se actualizará automáticamente.

`font`

La instancia de Zdog.Font se usa para este texto.

`value`

Valor de texto como una cadena.

`fontSize`

Tamaño de fuente, medido en píxeles.

`textAlign`

Alineación de texto horizontal, equivalente a la propiedad text-align CSS. Esto puede ser 'left' , 'center' o 'right'

`textBaseline`

Alineación de texto vertical, equivalente a la propiedad textBaseline de lienzo HTML5. Esto puede ser 'top' , 'middle' o 'bottom'

`color`

Color de texto, equivalente a Shape.color . Configurar esto actualizará el color para todos los niños del grupo.

`fill`

Llena de texto, equivalente a Shape.fill . Configurar esto actualizará el relleno para todos los niños del grupo.

`stroke`

Trazo de texto, equivalente a Shape.stroke . Configurar esto actualizará el accidente cerebrovascular para todos los niños del grupo.

Zdog.waitforfonts

Devuelve una promesa que se resuelve tan pronto como todas las fuentes actualmente agregadas a la escena están cargadas y listas para su uso.

 Zdog . waitForFonts ( ) . then ( function ( ) {
  // Do something once the font is ready
}

Hacer

Google Fonts & Typekit Integration?
Soporte para diferentes direcciones de texto, por ejemplo, de derecha a izquierda
Soporte para las fuentes alternativas
Fuentes de soporte para color (SVG)