zfont
1.0.0
Un plugin de texte pour le moteur ZDOG 3D! Rend les polices truetype via Typr.js | jaames.github.io/zfont
Caractéristiques | Mises en garde | Démo | Installation | Utilisation | API | Zdog.font | Zdog.Text | Zdog.TextGrow | TODO | Bâtiment
Une démo en direct peut être trouvée ici, il y a aussi quelques exemples plus approfondis sur Codepen!
$ npm install zfont --saveSi vous utilisez un bundler de module comme WebPack ou Rollup, importez ZFONT dans votre projet:
// Using ES6 module syntax
import Zfont from 'zfont' ;
// Using CommonJS modules
const Zfont = require ( 'zfont' ) ; < script src =" https://cdn.jsdelivr.net/npm/zfont/dist/zfont.min.js " > </ script > Lorsque vous incluez manuellement la bibliothèque comme celle-ci, elle sera disponible à l'échelle mondiale sur window.Zfont
Version de développement
Non compressé à environ 75 Ko, avec des commentaires source inclus
Version de production
Minifié à 45 Ko
Puis ajoutez-le à la <head> de votre page avec une balise <script> :
< html >
< head >
<!-- ... -->
< script src =" ./path/to/zfont.min.js " > </ script >
</ head >
<!-- ... -->
</ html > Une fois que ZDOG et ZFONT ont été importés / téléchargés, nous devons initialiser le plugin ZFONT. Une fois qu'elle est initialisée, les classes Zdog.Font , Zdog.Text et Zdog.TextGroup seront disponibles:
Zfont . init ( Zdog ) ;(PSSST! Si vous préférez plonger, consultez la démo de base sur Codepen)
Pour dessiner du texte dans une scène ZDOG, nous devons d'abord configurer un nouvel objet Zdog.Font avec l'URL .TTF pour notre police souhaitée, alors nous pouvons créer un nouvel objet Zdog.Text et l'ajouter à l'illustration comme toute autre forme:
// 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 ( ) ; Zdog.Text et Zdog.TextGroup prennent en charge le texte multiligne, en insérant un caractère Newline ( n ) partout où vous souhaitez ajouter une pause de ligne:
new Zdog . Text ( {
...
value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ; Pour une meilleure lisibilité, vous préférez peut-être utiliser un tableau de chaînes pour l'option value . Dans ce cas, chaque chaîne du tableau sera traitée comme une ligne de texte séparée:
new Zdog . Text ( {
...
value : [
'The quick brown fox'
'jumps over the' ,
'lazy zdog'
]
} ) ; Dans la plupart des cas, vous n'avez pas à vous soucier d'attendre que les polices se chargent, car les objets de texte seront magiquement existants une fois que leur police sera prête à l'emploi. Cependant, le plugin fournit également une fonction utilitaire Zdog.waitForFonts() si vous devez retarder quoi que ce soit jusqu'à ce que toutes les polices de votre scène aient terminé le chargement.
Par exemple, modifions la boucle d'animation de l'exemple précédent afin qu'il ne commence pas tant que les polices sont prêtes:
// 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 ( ) ;
} ) Représente une police qui peut être utilisée par une instance de Zdog.Text ou Zdog.TextGroup .
let font = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) | Paramot | Détails | Défaut |
|---|---|---|
src | Chemin URL de police. Il peut s'agir d'une police .ttf ou .otf , consultez le repo typr.js pour plus de détails sur la prise en charge de la police | '' |
measureText(text, fontSize) Obtenez les mesures du text de chaîne spécifié lorsqu'il est rendu sur fontSize (mesuré en pixels), similaire à CanvasRenderingContext2D.measureText() .
Renvoie un objet avec width , height , descender , ascender .
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') Renvoie un tableau de commandes de chemin ZDOG pour le text de chaîne spécifié, lorsqu'il est rendu sur fontSize (mesuré en pixels).
x , y , z ) est le point d'origine du cheminalignX est l'alignement du texte horizontal (équivalent à la propriété text-align CSS); soit "left" , "center" ou "right" .alignY est l'alignement du texte vertical; soit "top" , "middle" ou "bottom". waitForLoad()Renvoie une promesse qui résout une fois cette police terminée le chargement.
Un objet utilisé pour rendre du texte. Il hérite de tout de la classe Zdog.Shape .
new Zdog . Text ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
textBaseline : 'middle' ,
color : '#5222ee' ,
stroke : 1 ,
} ) Zdog.Text hérite de toutes les options de la classe Zdog.Shape , plus quelques extras:
| Paramot | Détails | Défaut |
|---|---|---|
font | Zdog.Font à utiliser pour ce texte. Ceci est nécessaire. | null |
value | Chaîne de texte | '' |
fontSize | Taille du texte, mesurée en pixels | 64 |
textAlign | Alignement du texte horizontal, équivalent à la propriété CSS text-align . Cela peut être 'left' , 'center' ou 'right' | 'left' |
textBaseline | Alignement du texte vertical, équivalent à la propriété textBaseline du canevas HTML5. Cela peut être 'top' , 'middle' ou 'bottom' | 'bottom' |
Zdog.Text hérite de toutes les propriétés de la classe Zdog.Shape , ainsi que des extras. Toutes ces propriétés peuvent être mises à jour à tout moment et le texte rendu se metra à jour automatiquement.
font L'instance Zdog.Font étant utilisée pour ce texte.
valueValeur texte en tant que chaîne.
fontSizeTaille de la police, mesurée en pixels.
textAlign Alignement du texte horizontal, équivalent à la propriété CSS text-align . Cela peut être 'left' , 'center' ou 'right'
textBaseline Alignement du texte vertical, équivalent à la propriété textBaseline du canevas HTML5. Cela peut être 'top' , 'middle' ou 'bottom'
Cette classe est très similaire à Zdog.Text , sauf qu'elle agit à la place comme un Zdog.Group , et chaque glyphe de texte est rendu comme sa propre forme. Ceci est utile pour les cas d'utilisation plus avancés où vous avez besoin de contrôler chaque caractère.
new Zdog . TextGroup ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
color : '#5222ee' ,
stroke : 2 ,
} ) Zdog.TextGroup hérite de toutes les options de la classe Zdog.Group , plus quelques extras:
| Paramot | Détails | Défaut |
|---|---|---|
font | Zdog.Font à utiliser pour ce texte. Ceci est nécessaire. | null |
value | Chaîne de texte | '' |
fontSize | Taille du texte, mesurée en pixels | 64 |
textAlign | Alignement du texte horizontal, équivalent à la propriété CSS text-align . Cela peut être 'left' , 'center' ou 'right' | 'left' |
textBaseline | Alignement du texte vertical, équivalent à la propriété textBaseline du canevas HTML5. Cela peut être 'top' , 'middle' ou 'bottom' | 'bottom' |
color | Couleur de texte | #333 |
fill | Remplissage de texte | false |
stroke | Coup de texte | stroke |
Zdog.TextGroup hérite de toutes les propriétés de la classe Zdog.Group , ainsi que des extras. Toutes ces propriétés peuvent être mises à jour à tout moment et le texte rendu se metra à jour automatiquement.
font L'instance Zdog.Font étant utilisée pour ce texte.
valueValeur texte en tant que chaîne.
fontSizeTaille de la police, mesurée en pixels.
textAlign Alignement du texte horizontal, équivalent à la propriété CSS text-align . Cela peut être 'left' , 'center' ou 'right'
textBaseline Alignement du texte vertical, équivalent à la propriété textBaseline du canevas HTML5. Cela peut être 'top' , 'middle' ou 'bottom'
color Couleur de texte, équivalent à Shape.color . Le réglage mettra à jour la couleur de tous les enfants du groupe.
fill Remplissage de texte, équivalent à Shape.fill . Le réglage mettra à jour le remplissage pour tous les enfants du groupe.
stroke AVC du texte, équivalent à Shape.stroke . Le réglage mettra à jour l'AVC pour tous les enfants du groupe.
Renvoie une promesse qui se résout dès que toutes les polices actuellement ajoutées à la scène sont chargées et prêtes à l'emploi.
Zdog . waitForFonts ( ) . then ( function ( ) {
// Do something once the font is ready
} $ npm install$ npm start$ npm run build2019 James Daniel
