p5 hershey js
1.0.0
P5.js Hershey Vector Font Library. (Démo en direct)
Les polices Hershey sont une collection de polices vectorielles développées c. 1967 par le Dr Allen Vincent Hershey au Naval Weapons Laboratory, à l'origine conçu pour être rendu à l'aide de vecteurs sur les premiers écrans de tube à rayons cathodiques. Les polices sont accessibles au public et ont quelques restrictions d'utilisation. Les polices vectorielles sont facilement mises à l'échelle et tournées en deux ou trois dimensions; Par conséquent, les polices Hershey ont été largement utilisées dans les graphiques informatiques, les programmes de conception assistés par ordinateur et, plus récemment, également dans des applications de fabrication assistées par ordinateur comme la gravure laser. (Wikipedia)
Cette bibliothèque P5.JS rend les polices Hershey dans le navigateur. Il peut analyser les polices Hershey fournies par l'utilisateur ainsi que la cartographie personnalisée des caractères.
| romain | gothique | grec | Autre |
|---|---|---|---|
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 |
Dans HTML, incluez la bibliothèque ainsi que le fichier de données.
< script src =" p5.hershey.js " > </ script >
< script src =" p5.hershey.data.js " > </ script > Et dans le sketch p5 javascript, appelez 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 spécifie le mappage de caractères à utiliser, voir les jeux de caractères pris en charge pour plus de détails.align peut être l'un de left , center ou right .noise peut être utilisé pour ajouter des effets spéciaux aux sommets. noise peut être l'un des données suivantes:noise est un nombre, un filtre randomGaussian par défaut est appliqué pour donner un effet nerveux / nerveux en utilisant noise comme écart type.noise est un objet de la forme {x: (x,y)=>(x_offset), y: (x,y)=>(y_offset)} , noise.x et noise.y seront appelés sur chaque sommet, et la valeur de retour est utilisée comme décalage pour l'axe respectif.Les utilisateurs peuvent également fournir leurs propres polices et mappages Hershey. Pour analyser une police Hershey correctement formatée comme une chaîne, utilisez:
var font_data = P5 . hershey . parseFontString ( " 49 12LXRMRV RNOOPOSQTSTUSUPVO" ) ;Un mappage du point d'entrée Unicode à l'index utilisé par la police Hershey est également requis. Si les indices sont identiques, cela peut être aussi simple que:
var cmap = ( x ) => ( x ) ; Disons que vous avez une cartographie plus compliquée, où les personnages A , B , C , D seront cartographiés aux indices 2,4,6,8 dans la police Hershey:
var cmap = ( x ) => ( [ 2 , 4 , 6 , 8 ] [ x - 65 ] ) ; Enfin nourrir la police et la cartographie à P5.hershey.putText :
P5 . hershey . putText ( "Hello World!" , {
font : font_data ,
cmap : cmap ,
} ) ;P5.hershey.estimateTextWidth(text, args) renvoie la largeur dans les pixels du texte s'il doit être dessiné avec des arguments args .P5.hershey.validateFont(font_data) Renvoie un Array contenant des indices de tous les glyphes non valides dans un objet de police. index.html pour plus de détails.
