p5 hershey js
1.0.0
P5.js Hershey Vector Font Library. (Demo en vivo)
Las fuentes Hershey son una colección de fuentes vectoriales desarrolladas c. 1967 por el Dr. Allen Vincent Hershey en el Laboratorio de Armas Navales, originalmente diseñada para ser representada utilizando vectores en pantallas de tubo de rayos cáculos tempranos. Las fuentes están disponibles públicamente y tienen pocas restricciones de uso. Las fuentes vectoriales se escalan y giran fácilmente en dos o tres dimensiones; En consecuencia, las fuentes Hershey se han utilizado ampliamente en gráficos por computadora, programas de diseño asistidos por computadora, y más recientemente también en aplicaciones de fabricación asistidas por computadora como el grabado con láser. (Wikipedia)
Esta biblioteca P5.JS representa las fuentes de Hershey en el navegador. Puede analizar las fuentes de Hershey proporcionadas por el usuario junto con el mapeo de caracteres personalizado.
| romano | gótico | Griego | Otro |
|---|---|---|---|
COMPLEX | GOTHIC_ENGLISH_TRIPLEX | GREEK_COMPLEX | ITALIC_COMPLEX |
COMPLEX_SMALL | GOTHIC_GERMAN_TRIPLEX | GREEK_COMPLEX_SMALL | ITALIC_COMPLEX_SMALL |
DUPLEX | GOTHIC_ITALIAN_TRIPLEX | GREEK_PLAIN | ITALIC_TRIPLEX |
PLAIN | GREEK_SIMPLEX | SCRIPT_COMPLEX | |
SIMPLEX | SCRIPT_SIMPLEX | ||
TRIPLEX | CYRILLIC_COMPLEX |
En HTML, incluya la biblioteca y el archivo de datos.
< script src =" p5.hershey.js " > </ script >
< script src =" p5.hershey.data.js " > </ script > Y en el boceto P5 JavaScript, llame a P5.hershey.putText
push ( ) ;
translate ( 100 , 100 ) ;
noFill ( ) ;
stroke ( 0 ) ;
strokeWeight ( 1 ) ;
P5 . hershey . putText ( "Hello World!" ) ;
pop ( ) ; P5 . hershey . putText ( "Hello World!" , {
cmap : FONT_HERSHEY . GOTHIC_GERMAN_TRIPLEX ,
align : "center" ,
noise : 0.5 ,
} ) ;cmap especifica la asignación de caracteres a usar, consulte Conjuntos de caracteres compatibles para más detalles.align puede ser uno de left , center o right .noise se puede usar para agregar efectos especiales a los vértices. noise puede ser cualquiera de los siguientes tipos de datos:noise es un número, se aplica un filtro randomGaussian predeterminado para dar un efecto brumoso/nervioso usando el noise como desviación estándar.noise es un objeto de la forma {x: (x,y)=>(x_offset), y: (x,y)=>(y_offset)} , noise.x y noise.y .Los usuarios también pueden proporcionar sus propias fuentes y mapeos Hershey. Para analizar una fuente Hershey formateada correctamente como una cadena, use:
var font_data = P5 . hershey . parseFontString ( " 49 12LXRMRV RNOOPOSQTSTUSUPVO" ) ;También se requiere un mapeo desde unicode punto de entrada al índice utilizado por la fuente Hershey. Si los índices son idénticos, esto puede ser tan simple como:
var cmap = ( x ) => ( x ) ; Digamos que tiene un mapeo más complicado, donde los personajes A , B , C , D se asignarán a los índices 2,4,6,8 en la fuente Hershey:
var cmap = ( x ) => ( [ 2 , 4 , 6 , 8 ] [ x - 65 ] ) ; Finalmente alimente la fuente y el mapeo a P5.hershey.putText :
P5 . hershey . putText ( "Hello World!" , {
font : font_data ,
cmap : cmap ,
} ) ;P5.hershey.estimateTextWidth(text, args) Devuelve el ancho en píxeles del texto si se va a dibujar con argumentos args .P5.hershey.validateFont(font_data) Devuelve una Array que contiene índices de todos los glifos inválidos en un objeto de fuentes. index.html para más detalles.
