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 --saveWebpackやロールアップなどのモジュールバンドラーを使用している場合は、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フォントである場合があります。Fontサポートの詳細については、typr.jsリポジトリをご覧ください。 | '' |
measureText(text, fontSize) CanvasRenderingContext2D.measureText()と同様に、 fontSize （ピクセルで測定）でレンダリングされたときに指定された文字列textの測定値を取得します。
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 CanvasのtextBaselineプロパティに相当する垂直テキストアライメント。これは'top' 、 'middle' 、または'bottom'のいずれかです | 'bottom' |
Zdog.Text 、 Zdog.Shapeクラスのすべてのプロパティといくつかのエキストラを継承します。これらのプロパティはすべていつでも更新でき、レンダリングされたテキストは自動的に更新されます。
fontこのテキストに使用されているZdog.Fontインスタンス。
value文字列としてのテキスト値。
fontSizeピクセルで測定されたフォントサイズ。
textAlign CSS text-alignプロパティに相当する水平テキストアライメント。これは'left' 、 'center' 、または'right'のいずれかです
textBaseline HTML5 CanvasのtextBaselineプロパティに相当する垂直テキストアライメント。これは'top' 、 'middle' 、または'bottom'のいずれかです
このクラスは、代わりにZdog.Groupとして機能することを除いて、 Zdog.Textに非常に似ており、各テキストグリフは独自の形状としてレンダリングされます。これは、各キャラクターを制御する必要があるより高度なユースケースに役立ちます。
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 Canvasの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 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 James Daniel
