zfont
1.0.0
Ein Text -Plugin für den Zdog 3D -Motor! Renders TrueType -Schriftarten über typr.js | Jaames.github.io/zfont
Funktionen | Vorbehalte | Demo | Installation | Verwendung | API | Zdog.font | Zdog.text | Zdog.TextGroup | Todo | Gebäude
Eine Live-Demo finden Sie hier, es gibt auch einige detailliertere Beispiele auf Codepen!
$ npm install zfont --saveWenn Sie einen Modul -Bundler wie WebPack oder Rollup verwenden, importieren Sie ZFONT in Ihr Projekt:
// 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 > Wenn die Bibliothek manuell einbezogen wird, ist sie weltweit auf window.Zfont verfügbar
Entwicklungsversion
Unkomprimiert mit rund 75 KB, mit Quellenkommentaren enthalten
Produktionsversion
Abgebaut bis 45 KB
Fügen Sie es dann mit einem <script> -Tag aus <head> Ihrer Seite hinzu:
< html >
< head >
<!-- ... -->
< script src =" ./path/to/zfont.min.js " > </ script >
</ head >
<!-- ... -->
</ html > Nachdem sowohl Zdog als auch Zfont importiert/heruntergeladen wurden, müssen wir das Zfont -Plugin initialisieren. Sobald es initialisiert wurde, sind die Klassen Zdog.Font , Zdog.Text und Zdog.TextGroup verfügbar:
Zfont . init ( Zdog ) ;(PSSST! Wenn Sie lieber eintauchen, lesen Sie die grundlegende Demo auf CodePen)
Um einen Text in einer Zdog -Szene zu zeichnen, müssen wir zunächst ein neues Zdog.Font -Objekt mit der .ttf -URL für unsere gewünschte Schriftart einrichten. Dann können wir wie jede andere Form ein neuer Zdog.Text -Objekt erstellen und der Illustration hinzufügen:
// 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 ( ) ; Sowohl Zdog.Text als auch Zdog.TextGroup unterstützen Multiline -Text, indem Sie ein neues Zeilenzeichen ( n ) einfügen, wo immer Sie einen Zeilenunterbrecher hinzufügen möchten:
new Zdog . Text ( {
...
value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ; Für eine bessere Lesbarkeit können Sie es vorziehen, eine Reihe von Zeichenfolgen für die value zu verwenden. In diesem Fall wird jede Zeichenfolge im Array als separate Textzeile behandelt:
new Zdog . Text ( {
...
value : [
'The quick brown fox'
'jumps over the' ,
'lazy zdog'
]
} ) ; In den meisten Fällen müssen Sie sich keine Sorgen darüber machen, dass das Laden von Schriftarten darauf warten, dass Textobjekte auf magische Weise entstehen, sobald ihre Schriftart bereit ist. Das Plugin bietet jedoch auch eine Zdog.waitForFonts() -Einfunktion, wenn Sie etwas verzögern müssen, bis alle Schriftarten in Ihrer Szene das Laden beendet haben.
Lassen Sie uns beispielsweise die Animationsschleife aus dem vorherigen Beispiel ändern, damit er erst beginnt, wenn die Schriftarten fertig sind:
// 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äsentiert eine Schriftart, die durch eine Instanz von Zdog.Text oder Zdog.TextGroup verwendet werden kann.
let font = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) | Param | Details | Standard |
|---|---|---|
src | Schriftart URL -Pfad. Dies kann ein .ttf oder .otf -Schriftart sein. Weitere Informationen zur Schriftartunterstützung finden Sie im Typr.js -Repo | '' |
measureText(text, fontSize) Erhalten Sie die Messungen für den angegebenen text , wenn sie bei fontSize (gemessen in Pixel) gerendert werden, ähnlich wie CanvasRenderingContext2D.measureText() .
Gibt ein Objekt mit width , height , descender , ascender zurück.
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') Gibt ein Array von ZDOG -Pfadbefehlen für den angegebenen String text zurück, wenn er bei fontSize (gemessen in Pixel) gerendert wird.
x , y , z ) ist der Ursprungspunkt des PfadesalignX ist die horizontale Textausrichtung (äquivalent zur Eigenschaft von CSS- text-align ); Entweder "left" , "center" oder "right" .alignY ist die vertikale Textausrichtung; Entweder "top" , "middle" oder "bottom". waitForLoad()Gibt ein Versprechen zurück, das sich entschlossen, sobald diese Schrift geladen hat.
Ein Objekt zum Rendern von Text. Es erbt alles von der Klasse Zdog.Shape .
new Zdog . Text ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
textBaseline : 'middle' ,
color : '#5222ee' ,
stroke : 1 ,
} ) Zdog.Text erbt alle Optionen aus der Zdog.Shape -Klasse sowie ein paar Extras:
| Param | Details | Standard |
|---|---|---|
font | Zdog.Font für diesen Text verwendet. Dies ist erforderlich. | null |
value | Textzeichenfolge | '' |
fontSize | Textgröße, gemessen in Pixel | 64 |
textAlign | Horizontale Textausrichtung, entspricht der Eigenschaft CSS text-align Eigenschaft. Dies kann entweder 'left' , 'center' oder 'right' sein | 'left' |
textBaseline | Vertikale Textausrichtung, äquivalent zur textBaseline -Eigenschaft von HTML5 Canvas. Dies kann entweder 'top' , 'middle' oder 'bottom' sein | 'bottom' |
Zdog.Text erbt alle Eigenschaften aus der Zdog.Shape -Klasse sowie einigen Extras. Alle diese Eigenschaften können jederzeit aktualisiert werden und der gerenderte Text wird automatisch aktualisiert.
font Die für diesen Text verwendete Zdog.Font -Instanz.
valueTextwert als Zeichenfolge.
fontSizeSchriftgröße, gemessen in Pixel.
textAlign Horizontale Textausrichtung, entspricht der Eigenschaft CSS text-align Eigenschaft. Dies kann entweder 'left' , 'center' oder 'right' sein
textBaseline Vertikale Textausrichtung, äquivalent zur textBaseline -Eigenschaft von HTML5 Canvas. Dies kann entweder 'top' , 'middle' oder 'bottom' sein
Diese Klasse ist Zdog.Text sehr ähnlich, außer dass sie stattdessen als Zdog.Group fungiert, und jeder Textglyphe wird als eigene Form gerendert. Dies ist hilfreich für erweiterte Anwendungsfälle, in denen Sie die Kontrolle über jeden Charakter benötigen.
new Zdog . TextGroup ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
color : '#5222ee' ,
stroke : 2 ,
} ) Zdog.TextGroup erbt alle Optionen aus der Zdog.Group -Klasse sowie einige Extras:
| Param | Details | Standard |
|---|---|---|
font | Zdog.Font für diesen Text verwendet. Dies ist erforderlich. | null |
value | Textzeichenfolge | '' |
fontSize | Textgröße, gemessen in Pixel | 64 |
textAlign | Horizontale Textausrichtung, entspricht der Eigenschaft CSS text-align Eigenschaft. Dies kann entweder 'left' , 'center' oder 'right' sein | 'left' |
textBaseline | Vertikale Textausrichtung, äquivalent zur textBaseline -Eigenschaft von HTML5 Canvas. Dies kann entweder 'top' , 'middle' oder 'bottom' sein | 'bottom' |
color | Textfarbe | #333 |
fill | Textfüllung | false |
stroke | Texthub | stroke |
Zdog.TextGroup erbt alle Eigenschaften der Zdog.Group -Klasse sowie einige Extras. Alle diese Eigenschaften können jederzeit aktualisiert werden und der gerenderte Text wird automatisch aktualisiert.
font Die für diesen Text verwendete Zdog.Font -Instanz.
valueTextwert als Zeichenfolge.
fontSizeSchriftgröße, gemessen in Pixel.
textAlign Horizontale Textausrichtung, entspricht der Eigenschaft CSS text-align Eigenschaft. Dies kann entweder 'left' , 'center' oder 'right' sein
textBaseline Vertikale Textausrichtung, äquivalent zur textBaseline -Eigenschaft von HTML5 Canvas. Dies kann entweder 'top' , 'middle' oder 'bottom' sein
color Textfarbe, äquivalent zu Shape.color . Wenn Sie dies festlegen, aktualisieren Sie die Farbe für alle Kinder der Gruppe.
fill Textfüllung, äquivalent zu Shape.fill . Wenn Sie dies festlegen, aktualisieren Sie die Füllung für alle Kinder der Gruppe.
stroke Texthub, entspricht Shape.stroke . Wenn Sie dies festlegen, aktualisieren Sie den Schlaganfall für alle Kinder der Gruppe.
Gibt ein Versprechen zurück, das sich löst, sobald alle in der Szene hinzugefügten Schriftarten geladen und für den Einsatz bereit sind.
Zdog . waitForFonts ( ) . then ( function ( ) {
// Do something once the font is ready
} $ npm install$ npm start$ npm run build2019 James Daniel
