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詹姆斯·丹尼尔
