zfont
1.0.0
Текстовый плагин для ZDOG 3D -двигателя! Образует шрифты TrueType через typr.js | jaames.github.io/zfont
Особенности | Предостережения | Демо | Установка | Использование | API | Zdog.font | Zdog.text | ZDOG.TextGroup | Тодо | Здание
Здесь можно найти живую демонстрацию, есть еще несколько углубленных примеров на Codepen!
$ npm install zfont --saveЕсли вы используете модульный пакет, такой как WebPack или Rollup, импортируйте ZFONT в свой проект:
// 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 > Когда вручную, включая библиотеку, такую, она будет глобально доступна на window.Zfont
Версия разработки
Несомнено около 75 КБ, с комментариями источника включены
Производственная версия
Мини -минимум до 45 КБ
Затем добавьте его на <head> вашей страницы с помощью тега <script> :
< html >
< head >
<!-- ... -->
< script src =" ./path/to/zfont.min.js " > </ script >
</ head >
<!-- ... -->
</ html > После того, как и ZDOG, и ZFONT были импортированы/загружены, нам необходимо инициализировать плагин ZFONT. Как только он будет инициализирован, будут доступны классы Zdog.Font , Zdog.Text и Zdog.TextGroup :
Zfont . init ( Zdog ) ;(PSSST! Если вы предпочитаете погрузиться, проверьте основную демонстрацию на Codepen)
Чтобы нарисовать немного текста в сцене ZDOG, сначала нам нужно настроить новый объект Zdog.Font с помощью URL .TTF для нашего желаемого шрифта, затем мы можем создать новый объект Zdog.Text и добавить его на иллюстрацию, как и в любой другой форме:
// 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 , и Zdog.TextGroup Поддерживают многослойный текст, вставив символ Newline ( n ), где бы вы ни хотели добавить разрыв в строке:
new Zdog . Text ( {
...
value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ; Для лучшей читаемости вы можете предпочесть использовать массив строк для опции value . В этом случае каждая строка в массиве будет рассматриваться как отдельная линия текста:
new Zdog . Text ( {
...
value : [
'The quick brown fox'
'jumps over the' ,
'lazy zdog'
]
} ) ; В большинстве случаев вам не нужно беспокоиться о ожидании загрузки шрифтов, так как текстовые объекты волшебным образом появятся в существовании, как только их шрифт будет готов к использованию. Тем не менее, плагин также предоставляет функцию утилиты Zdog.waitForFonts() если вам нужно что -либо отложить, пока все шрифты в вашей сцене не завершит загрузку.
Например, давайте изменим цикл анимации из предыдущего примера, чтобы он не начался до тех пор, пока шрифты не будут готовы:
// 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 ( ) ;
} ) Представляет шрифт, который может использоваться экземпляром Zdog.Text или Zdog.TextGroup .
let font = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) | Парамет | Подробности | По умолчанию |
|---|---|---|
src | Путь URL -адреса шрифта. Это может быть .otf .ttf | '' |
measureText(text, fontSize) Получите измерения для указанного строкового text при визуализации в fontSize (измерено в пикселях), аналогично CanvasRenderingContext2D.measureText() .
Возвращает объект с width , height , descender , ascender .
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') Возвращает массив команд Path ZDOG для указанного строкового text , когда он визуализирован при fontSize (измеренный в пикселях).
x , y , z ) - точка происхождения путиalignX -это горизонтальное выравнивание текста (эквивалентное свойству CSS text-align ); Либо "left" , "center" или "right" .alignY - это вертикальное выравнивание текста; Либо "top" , "middle" или "bottom". waitForLoad()Возвращает обещание, которое разрешается, как только этот шрифт закончил загрузку.
Объект, используемый для рендеринга. Это наследует все, от класса Zdog.Shape .
new Zdog . Text ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
textBaseline : 'middle' ,
color : '#5222ee' ,
stroke : 1 ,
} ) Zdog.Text наследует все варианты класса Zdog.Shape , а также пара дополнений:
| Парамет | Подробности | По умолчанию |
|---|---|---|
font | Zdog.Font для использования для этого текста. Это требуется. | null |
value | Текстовая строка | '' |
fontSize | Размер текста, измеренный в пикселях | 64 |
textAlign | Горизонтальное выравнивание текста, эквивалентное свойству text-align CSS. Это может быть либо 'left' , 'center' или 'right' | 'left' |
textBaseline | Выравнивание вертикального текста, эквивалентное свойству HTML5 Canvas ' textBaseline . Это может быть либо 'top' , 'middle' или 'bottom' | 'bottom' |
Zdog.Text наследует все свойства от класса Zdog.Shape , а также некоторые дополнения. Все эти свойства могут быть обновлены в любое время, а текст рендеринга будет автоматически обновляться.
font Экземпляр Zdog.Font используется для этого текста.
valueТекстовое значение как строка.
fontSizeРазмер шрифта, измеренный в пикселях.
textAlign Горизонтальное выравнивание текста, эквивалентное свойству text-align CSS. Это может быть либо 'left' , 'center' или 'right'
textBaseline Выравнивание вертикального текста, эквивалентное свойству HTML5 Canvas ' textBaseline . Это может быть либо 'top' , 'middle' или 'bottom'
Этот класс очень похож на Zdog.Text , за исключением случаев, когда он действует как Zdog.Group , и каждый текст Glyph отображается в качестве собственной формы. Это полезно для более продвинутых вариантов использования, где вам нужен контроль над каждым символом.
new Zdog . TextGroup ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
color : '#5222ee' ,
stroke : 2 ,
} ) Zdog.TextGroup наследует все параметры из класса Zdog.Group , плюс несколько дополнительных:
| Парамет | Подробности | По умолчанию |
|---|---|---|
font | Zdog.Font для использования для этого текста. Это требуется. | null |
value | Текстовая строка | '' |
fontSize | Размер текста, измеренный в пикселях | 64 |
textAlign | Горизонтальное выравнивание текста, эквивалентное свойству text-align CSS. Это может быть либо 'left' , 'center' или 'right' | 'left' |
textBaseline | Выравнивание вертикального текста, эквивалентное свойству HTML5 Canvas ' textBaseline . Это может быть либо 'top' , 'middle' или 'bottom' | 'bottom' |
color | Текст цвета | #333 |
fill | Текст заполнение | false |
stroke | Текстовый удар | stroke |
Zdog.TextGroup наследует все свойства от класса Zdog.Group , а также некоторые дополнения. Все эти свойства могут быть обновлены в любое время, а текст рендеринга будет автоматически обновляться.
font Экземпляр Zdog.Font используется для этого текста.
valueТекстовое значение как строка.
fontSizeРазмер шрифта, измеренный в пикселях.
textAlign Горизонтальное выравнивание текста, эквивалентное свойству text-align CSS. Это может быть либо 'left' , 'center' или 'right'
textBaseline Выравнивание вертикального текста, эквивалентное свойству HTML5 Canvas ' textBaseline . Это может быть либо 'top' , 'middle' или 'bottom'
color Цвет текста, эквивалентный для Shape.color . Установка этого будет обновлять цвет для всех детей группы.
fill Текстовое заполнение, эквивалентное Shape.fill . Установка этого обновит заполнение для всех детей группы.
stroke Текстовый ход, эквивалентный для Shape.stroke . Установка этого будет обновлять инсульт для всех детей группы.
Возвращает обещание, которое разрешается, как только все шрифты, добавленные в настоящее время на сцену, загружаются и готовы к использованию.
Zdog . waitForFonts ( ) . then ( function ( ) {
// Do something once the font is ready
} $ npm install$ npm start$ npm run build2019 Джеймс Даниэль
