zfont
1.0.0
Um plugin de texto para o motor ZDOG 3D! Renderiza fontes TrueType via Typr.js | Jaames.github.io/zfont
Recursos | Advertências | Demo | Instalação | Uso | API | Zdog.font | Zdog.text | Zdog.textGroup | TODO | Prédio
Uma demonstração ao vivo pode ser encontrada aqui, também há alguns exemplos mais detalhados no Codepen!
$ npm install zfont --saveSe você estiver usando um módulo como webpack ou rollup, importe o ZFONT para o seu projeto:
// 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 > Ao incluir manualmente a biblioteca como essa, ela estará globalmente disponível na window.Zfont
Versão de desenvolvimento
Não compactado em cerca de 75 kb, com comentários de fonte incluídos
Versão de produção
Minificado para 45kb
Em seguida, adicione -o à <head> da sua página com uma tag <script> :
< html >
< head >
<!-- ... -->
< script src =" ./path/to/zfont.min.js " > </ script >
</ head >
<!-- ... -->
</ html > Depois que o ZDOG e o ZFONT foram importados/baixados, precisamos inicializar o plug -in do ZFONT. Depois de inicializado, as classes Zdog.Font , Zdog.Text e Zdog.TextGroup estarão disponíveis:
Zfont . init ( Zdog ) ;(Pssst! Se você preferir mergulhar, confira a demonstração básica no Codepen)
Para desenhar algum texto em uma cena do ZDOG, primeiro precisamos configurar um novo objeto Zdog.Font com o URL .ttf para a fonte desejada, então podemos criar um novo objeto Zdog.Text e adicioná -lo à ilustração como qualquer outra 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 ( ) ; Tanto Zdog.Text quanto Zdog.TextGroup suportam o texto multilina, inserindo um caractere de nova linha ( n ) onde quiser adicionar uma quebra de linha:
new Zdog . Text ( {
...
value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ; Para uma melhor legibilidade, você pode preferir usar uma variedade de strings para a opção value . Nesse caso, cada string na matriz será tratada como uma linha de texto separada:
new Zdog . Text ( {
...
value : [
'The quick brown fox'
'jumps over the' ,
'lazy zdog'
]
} ) ; Na maioria dos casos, você não precisa se preocupar em esperar que as fontes sejam carregadas, pois os objetos de texto surgirão magicamente quando a fonte estiver pronta para uso. No entanto, o plug -in também fornece uma função de utilidade Zdog.waitForFonts() se você precisar atrasar qualquer coisa até que todas as fontes da sua cena tenham terminado de carregar.
Por exemplo, vamos modificar o loop de animação do exemplo anterior para que não comece até que as fontes estejam prontas:
// 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 ( ) ;
} ) Representa uma fonte que pode ser usada por uma instância de Zdog.Text ou Zdog.TextGroup .
let font = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) | Param | Detalhes | Padrão |
|---|---|---|
src | Caminho da URL da fonte. Isso pode ser uma fonte .ttf ou .otf , confira o repositório Typr.js para obter mais detalhes sobre o suporte à fonte | '' |
measureText(text, fontSize) Obtenha as medições para o text especificado da string quando renderizado em fontSize (medido em pixels), semelhante ao CanvasRenderingContext2D.measureText() .
Retorna um objeto com width , height , descender , ascender .
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') Retorna uma matriz de comandos de caminho ZDOG para o text de string especificado, quando renderizado em fontSize (medido em pixels).
x , y , z ) é o ponto de origem do caminhoalignX é o alinhamento de texto horizontal (equivalente à propriedade CSS text-align ); "left" , "center" ou "right" .alignY é o alinhamento de texto vertical; "top" , "middle" ou "bottom". waitForLoad()Retorna uma promessa que resolve quando essa fonte terminar de carregar.
Um objeto usado para renderizar texto. Ele herda tudo da classe Zdog.Shape .
new Zdog . Text ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
textBaseline : 'middle' ,
color : '#5222ee' ,
stroke : 1 ,
} ) Zdog.Text herda todas as opções da classe Zdog.Shape , além de alguns extras:
| Param | Detalhes | Padrão |
|---|---|---|
font | Zdog.Font para usar para este texto. Isso é necessário. | null |
value | String de texto | '' |
fontSize | Tamanho do texto, medido em pixels | 64 |
textAlign | Alinhamento de texto horizontal, equivalente à propriedade CSS text-align . Isso pode ser 'left' , 'center' ou 'right' | 'left' |
textBaseline | Alinhamento de texto vertical, equivalente à propriedade textBaseline da HTML5 Canvas. Isso pode ser 'top' , 'middle' ou 'bottom' | 'bottom' |
Zdog.Text herda todas as propriedades da classe Zdog.Shape , bem como alguns extras. Todas essas propriedades podem ser atualizadas a qualquer momento e o texto renderizado será atualizado automaticamente.
font A instância Zdog.Font sendo usada para este texto.
valueValor de texto como uma string.
fontSizeTamanho da fonte, medido em pixels.
textAlign Alinhamento de texto horizontal, equivalente à propriedade CSS text-align . Isso pode ser 'left' , 'center' ou 'right'
textBaseline Alinhamento de texto vertical, equivalente à propriedade textBaseline da HTML5 Canvas. Isso pode ser 'top' , 'middle' ou 'bottom'
Essa classe é muito semelhante ao Zdog.Text , exceto que atua como um Zdog.Group , e cada glifo de texto é renderizado como sua própria forma. Isso é útil para casos de uso mais avançados, onde você precisa de controle sobre cada caractere.
new Zdog . TextGroup ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
color : '#5222ee' ,
stroke : 2 ,
} ) Zdog.TextGroup herda todas as opções da classe Zdog.Group , além de alguns extras:
| Param | Detalhes | Padrão |
|---|---|---|
font | Zdog.Font para usar para este texto. Isso é necessário. | null |
value | String de texto | '' |
fontSize | Tamanho do texto, medido em pixels | 64 |
textAlign | Alinhamento de texto horizontal, equivalente à propriedade CSS text-align . Isso pode ser 'left' , 'center' ou 'right' | 'left' |
textBaseline | Alinhamento de texto vertical, equivalente à propriedade textBaseline da HTML5 Canvas. Isso pode ser 'top' , 'middle' ou 'bottom' | 'bottom' |
color | Cor de texto | #333 |
fill | Preenchimento de texto | false |
stroke | Golpe de texto | stroke |
Zdog.TextGroup herda todas as propriedades da classe Zdog.Group , bem como alguns extras. Todas essas propriedades podem ser atualizadas a qualquer momento e o texto renderizado será atualizado automaticamente.
font A instância Zdog.Font sendo usada para este texto.
valueValor de texto como uma string.
fontSizeTamanho da fonte, medido em pixels.
textAlign Alinhamento de texto horizontal, equivalente à propriedade CSS text-align . Isso pode ser 'left' , 'center' ou 'right'
textBaseline Alinhamento de texto vertical, equivalente à propriedade textBaseline da HTML5 Canvas. Isso pode ser 'top' , 'middle' ou 'bottom'
color Cor de texto, equivalente a Shape.color . Definir isso atualizará a cor para todos os filhos do grupo.
fill Preenchimento de texto, equivalente a Shape.fill . Definir isso atualizará o preenchimento para todos os filhos do grupo.
stroke TRAPO DE TEXTO, equivalente a Shape.stroke . Definir isso atualizará o golpe para todos os filhos do grupo.
Retorna uma promessa que resolve assim que todas as fontes atualmente adicionadas à cena são carregadas e prontas para uso.
Zdog . waitForFonts ( ) . then ( function ( ) {
// Do something once the font is ready
} $ npm install$ npm start$ npm run build2019 James Daniel
