zfont
1.0.0
ZDOG 3D引擎的文本插件！通過typr.js渲染truetype字體| jaames.github.io/zfont
功能|警告|演示|安裝|用法| API | zdog.font | zdog.text | zdog.textgroup | todo |建築
可以在這裡找到實時演示，在Codepen上還有一些深入的示例！
$ npm install zfont --save如果您使用的是WebPack或lollup這樣的模塊Bundler，請將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上全球可用。
開發版本
未壓縮約75kb，其中包括來源評論
生產版本
升級為45kb
然後使用<script>標籤將其添加到頁面的<head> ：
< 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場景中繪製一些文本，首先我們需要使用.ttf url為我們所需的字體設置一個新的Zdog.Font對象，然後我們可以創建一個新的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支持多行文本，無論您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路徑。這可以是.ttf或.otf字體，請查看typr.js存儲庫以獲取有關字體支持的更多詳細信息 | '' |
measureText(text, fontSize)在fontSize呈現（以像素測量）呈現時，獲取指定字符串text的測量值，類似於CanvasRenderingContext2D.measureText() 。
返回一個具有width ， height ， descender ， ascender對象。
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom')當通過fontSize呈現（以像素測量）呈現時，返回指定字符串text的ZDOG路徑命令數組。
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 | 水平文本對齊，等效於CSS text-align屬性。這可以是'left' ， 'center'或'right' | 'left' |
textBaseline | 垂直文本對齊，相當於HTML5畫布的textBaseline屬性。這可以是'top' ， 'middle'或'bottom' | 'bottom' |
Zdog.Text繼承了Zdog.Shape類以及一些附加功能的所有屬性。所有這些屬性都可以隨時更新，渲染文本將自動更新。
font Zdog.Font實例用於此文本。
value文本值作為字符串。
fontSize字體尺寸，以像素為單位。
textAlign水平文本對齊，等效於CSS text-align屬性。這可以是'left' ， 'center'或'right'
textBaseline垂直文本對齊，相當於HTML5畫布的textBaseline屬性。這可以是'top' ， 'middle'或'bottom'
此類與Zdog.Text非常相似，除非它充當Zdog.Group ，而每個文本的雕文則作為自己的形狀呈現。這對於需要控制每個字符的更高級用例很有幫助。
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 | 水平文本對齊，等效於CSS text-align屬性。這可以是'left' ， 'center'或'right' | 'left' |
textBaseline | 垂直文本對齊，相當於HTML5畫布的textBaseline屬性。這可以是'top' ， 'middle'或'bottom' | 'bottom' |
color | 文字顏色 | #333 |
fill | 文字填充 | false |
stroke | 文字中風 | stroke |
Zdog.TextGroup繼承了Zdog.Group類的所有屬性，以及一些額外的屬性。所有這些屬性都可以隨時更新，渲染文本將自動更新。
font Zdog.Font實例用於此文本。
value文本值作為字符串。
fontSize字體尺寸，以像素為單位。
textAlign水平文本對齊，等效於CSS text-align屬性。這可以是'left' ， 'center'或'right'
textBaseline垂直文本對齊，相當於HTML5畫布的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詹姆斯·丹尼爾
