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إذا كنت تستخدم Bundler Module مثل 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 نص متعدد الألين ، عن طريق إدخال حرف خط جديد ( 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 ، تحقق من repo typr.js للحصول على مزيد من التفاصيل حول دعم الخط | '' |
measureText(text, fontSize) احصل على قياسات text السلسلة المحدد عند تقديمها عند fontSize (تقاس بالبكسل) ، على غرار CanvasRenderingContext2D.measureText() .
إرجاع كائن width ، height ، descender ، ascender .
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') إرجاع مجموعة من أوامر مسار ZDOG text السلسلة المحدد ، عند تقديمها عند fontSize (تقاس بالبكسل).
x ، y ، z ) هي نقطة أصل المسارalignX هي محاذاة النص الأفقي (أي ما يعادل خاصية text-align CSS) ؛ إما "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 | محاذاة النص العمودي ، أي ما يعادل خاصية textBaseline Canvas HTML5. يمكن أن يكون هذا إما 'top' أو 'middle' أو 'bottom' | 'bottom' |
يرث Zdog.Text جميع الخصائص من فئة Zdog.Shape ، وكذلك بعض الإضافات. يمكن تحديث كل هذه الخصائص في أي وقت وسيتم تحديث النص المقدم تلقائيًا.
font Zdog.Font مثيل يستخدم لهذا النص.
valueقيمة النص كسلسلة.
fontSizeحجم الخط ، يقاس بالبكسل.
textAlign محاذاة النص الأفقي ، أي ما يعادل خاصية text-align CSS. يمكن أن يكون هذا إما 'left' أو 'center' أو 'right'
textBaseline محاذاة النص العمودي ، أي ما يعادل خاصية textBaseline Canvas HTML5. يمكن أن يكون هذا إما '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 | محاذاة النص الأفقي ، أي ما يعادل خاصية text-align CSS. يمكن أن يكون هذا إما 'left' أو 'center' أو 'right' | 'left' |
textBaseline | محاذاة النص العمودي ، أي ما يعادل خاصية textBaseline Canvas HTML5. يمكن أن يكون هذا إما '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 محاذاة النص العمودي ، أي ما يعادل خاصية textBaseline Canvas HTML5. يمكن أن يكون هذا إما '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 جيمس دانيال
