opentype.js
1.3.4
يتيح لك الوصول إلى أحرف النص من المتصفح أو Node.js.
انظر https://opentype.js.org/ للحصول على عرض تجريبي مباشر.
glyf و PostScript cff )حدد أحد المصادر التالية في المثال التالي:
<!-- using global declaration -->
< script src =" https://your.favorite.cdn/opentype.js " > </ script >
< script > opentype . parse ( ... ) </ script >
<!-- using module declaration (need full path) -->
< script type = module >
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.mjs" ;
parse ( ... ) ;
</ script >npm install opentype.js const opentype = require ( 'opentype.js' ) ;
import opentype from 'opentype.js'
import { load } from 'opentype.js'باستخدام TypeScript؟ انظر هذا المثال
إذا كنت تخطط لتحسين أو تصحيح Opentype.js ، فيمكنك:
git clone git://github.com/yourname/opentype.js.gitcd opentype.jsnpm installnpm run buildnpm run start وانتقل إلى مجلد /docsnpm run test يتم ذلك في خطوتين: أولاً ، نقوم بتحميل ملف الخط في ArrayBuffer ...
// either from an URL
const buffer = fetch ( '/fonts/my.woff' ) . then ( res => res . arrayBuffer ( ) ) ;
// ... or from filesystem (node)
const buffer = require ( 'fs' ) . promises . readFile ( './my.woff' ) ;
// ... or from an <input type=file id=myfile> (browser)
const buffer = document . getElementById ( 'myfile' ) . files [ 0 ] . arrayBuffer ( ) ; ... ثم نحن .parse() في مثيل Font
// if running in async context:
const font = opentype . parse ( await buffer ) ;
console . log ( font ) ;
// if not running in async context:
buffer . then ( data => {
const font = opentype . parse ( data ) ;
console . log ( font ) ;
} )يؤدي ضغط Woff2 Brotli إلى أداء أفضل بنسبة 29 ٪ من سلف Woff. لكن هذا الضغط أكثر تعقيدًا أيضًا ، وسيؤدي إلى مكتبة Opentype.js أثقل بكثير (> 10 ×!)
لحل هذا: فك ضغط الخط مسبقًا (على سبيل المثال مع Fontello/Wawoff2).
// promise-based utility to load libraries using the good old <script> tag
const loadScript = ( src ) => new Promise ( ( onload ) => document . documentElement . append (
Object . assign ( document . createElement ( 'script' ) , { src , onload } )
) ) ;
const buffer = //...same as previous example...
// load wawoff2 if needed, and wait (!) for it to be ready
if ( ! window . Module ) {
const path = 'https://unpkg.com/[email protected]/build/decompress_binding.js'
const init = new Promise ( ( done ) => window . Module = { onRuntimeInitialized : done } ) ;
await loadScript ( path ) . then ( ( ) => init ) ;
}
// decompress before parsing
const font = opentype . parse ( Module . decompress ( await buffer ) ) ;من الممكن أيضًا صياغة خط من الصفر من خلال تحديد كل مسارات Bézier Glyph.
// this .notdef glyph is required.
const notdefGlyph = new opentype . Glyph ( {
name : '.notdef' ,
advanceWidth : 650 ,
path : new opentype . Path ( )
} ) ;
const aPath = new opentype . Path ( ) ;
aPath . moveTo ( 100 , 0 ) ;
aPath . lineTo ( 100 , 700 ) ;
// more drawing instructions...
const aGlyph = new opentype . Glyph ( {
name : 'A' ,
unicode : 65 ,
advanceWidth : 650 ,
path : aPath
} ) ;
const font = new opentype . Font ( {
familyName : 'OpenTypeSans' ,
styleName : 'Medium' ,
unitsPerEm : 1000 ,
ascender : 800 ,
descender : - 200 ,
glyphs : [ notdefGlyph , aGlyph ] } ) ; بمجرد أن يكون لديك كائن Font (من الصياغة أو من .parse() ) ، يمكنك حفظه مرة أخرى كملف.
// using node:fs
fs . writeFileSync ( "out.otf" , Buffer . from ( font . toArrayBuffer ( ) ) ) ;
// using the browser to createElement a <a> that will be clicked
const href = window . URL . createObjectURL ( new Blob ( [ font . toArrayBuffer ( ) ] ) , { type : "font/opentype" } ) ;
Object . assign ( document . createElement ( 'a' ) , { download : "out.otf" , href } ) . click ( ) ;يمثل الخط ملف خط Opentype محمّل. أنه يحتوي على مجموعة من الحروف الرسومية والأساليب لرسم النص على سياق الرسم ، أو للحصول على مسار يمثل النص.
glyphs : قائمة مفهرسة من كائنات Glyph.unitsPerEm : يتم تخزين إحداثيات x/y في الخطوط كمناسبات صحيحة. هذه القيمة تحدد حجم الشبكة. القيم المشتركة هي 2048 و 4096 .ascender : المسافة من خط الأساس من أعلى الصعود. في وحدات الخط ، وليس وحدات البكسل.descender : المسافة من خط الأساس من أدنى السليل. في وحدات الخط ، وليس وحدات البكسل. Font.getPath(text, x, y, fontSize, options)إنشاء مسار يمثل النص المحدد.
x : الموضع الأفقي لبداية النص. (افتراضي: 0 )y : الموضع الرأسي للخط الأساسي للنص. (افتراضي: 0 )fontSize : حجم النص بالبكسل (افتراضي: 72 ).options : {glyphrenderoptions} تم تمريرها إلى كل غليف ، انظر أدناهالخيارات هي كائن اختياري {glyphrenderoptions} يحتوي على:
script : البرنامج النصي المستخدم لتحديد الميزات التي يجب تطبيقها (افتراضي: "DFLT" أو "latn" )language : نظام اللغة المستخدم لتحديد الميزات التي يجب تطبيقها (افتراضي: "dflt" )kerning : إذا أخذ True معلومات kerning في الاعتبار (الافتراضي: true )features : كائن يحتوي على علامات ميزة Opentype كمفاتيح ، وقيمة منطقية لتمكين كل ميزة. حاليا فقط ميزات الرباط "liga" و "rlig" مدعومة (افتراضي: true ).hinting : إذا كان True يستخدم خط truetype التلميح إذا كان متاحًا (افتراضي: false ).colorFormat : يتم تحويل ألوان التنسيق إلى التقديم (الافتراضي: "hexa" ). يمكن أن يكون "rgb" / "rgba" لـ rgb() / rgba() إخراج ، "hex" / "hexa" لألوان سداسية 6/8 ، أو "hsl" / "hsla" لإخراج hsl() / hsla() . "bgra" يخرج كائن مع R ، G ، B ، A Keys (R/G/B من 0-255 ، A من 0-1). "raw" يخرج عدد صحيح كما هو مستخدم في جدول CPAL.fill : لون الخط ، اللون المستخدم لتقديم كل غروب (افتراضي: "black" ) ملاحظة: هناك أيضًا Font.getPaths() مع نفس الوسائط ، التي تُرجع قائمة المسارات.
Font.draw(ctx, text, x, y, fontSize, options)إنشاء مسار يمثل النص المحدد.
ctx : سياق رسم ثنائي الأبعاد ، مثل قماش.x : الموضع الأفقي لبداية النص. (افتراضي: 0 )y : الموضع الرأسي للخط الأساسي للنص. (افتراضي: 0 )fontSize : حجم النص بالبكسل (افتراضي: 72 ).options : {glyphrenderoptions} تم تمريرها إلى كل غليف ، انظر Font.getPath()الخيارات هي كائن اختياري يحتوي على:
kerning : إذا كان true ، يأخذ معلومات kerning في الاعتبار (الافتراضي: true )features : كائن يحتوي على علامات ميزة Opentype كمفاتيح ، وقيمة منطقية لتمكين كل ميزة. حاليا فقط ميزات الرباط "liga" و "rlig" مدعومة (افتراضي: true ).hinting : إذا كان True يستخدم خط truetype التلميح إذا كان متاحًا (افتراضي: false ). Font.drawPoints(ctx, text, x, y, fontSize, options) ارسم نقاط جميع الحروف الرسومية في النص. سيتم رسم نقاط على المنحنى باللون الأزرق ، وسيتم رسم نقاط خارج المنحنى باللون الأحمر. الحجج هي نفس Font.draw() .
Font.drawMetrics(ctx, text, x, y, fontSize, options)رسم خطوط تشير إلى قياسات الخط الهامة لجميع الحروف الرسومية في النص. تشير الخطوط السوداء إلى أصل نظام الإحداثيات (النقطة 0،0). الخطوط الزرقاء تشير إلى مربع حدود الرسول الرمزية. الخط الأخضر يشير إلى العرض المتقدم للرسوم الرسومية.
Font.stringToGlyphs(string)قم بتحويل السلسلة إلى قائمة كائنات Glyph. لاحظ أنه لا توجد مراسلات صارمة من 1 إلى 1 بين السلسلة وقائمة الرسول الرسمية بسبب البدائل المحتملة مثل الأربطة. يمكن أن تكون قائمة الحروف الرسومية التي تم إرجاعها أكبر أو أصغر من طول السلسلة المحددة.
Font.charToGlyph(char) تحويل الحرف إلى كائن glyph. إرجاع null إذا لم يكن من الممكن العثور على الرسوم الهزلية. لاحظ أن هذه الوظيفة تفترض أن هناك رسم خرائط فردي بين الحرف المعطى والخبراء ؛ بالنسبة للنصوص المعقدة ، قد لا يكون هذا هو الحال.
Font.getKerningValue(leftGlyph, rightGlyph) استرجاع قيمة زوج Kerning بين الرحم اليسرى (أو فهرسه) والكرموج الأيمن (أو الفهرس). إذا لم يتم العثور على زوج kerning ، إرجاع 0 . تتم إضافة قيمة Kerning إلى العرض المسبق عند حساب التباعد بين الحروف الرسومية.
Font.getAdvanceWidth(text, fontSize, options)إرجاع العرض المسبق للنص.
هذا شيء مختلف عن Path.getBoundingBox() ؛ على سبيل المثال ، تزيد المساحة البيضاء المرحلية من عرض التقدم ولكن ليس المربع المحيط أو خطاب متدفق مثل الخط "F" قد يكون له صندوق محيط أكبر من عرضه المتقدم.
هذا يتوافق مع canvas2dContext.measureText(text).width
fontSize : حجم النص بالبكسل (افتراضي: 72 ).options : {glyphrenderoptions} ، انظر Font.getPath() Font.palettes ( PaletteManager )يسمح ذلك بإدارة اللوحات والألوان في جدول CPAL ، دون الحاجة إلى تعديل الجدول يدويًا.
Font.palettes.add(colors)أضف لوحة جديدة.
colors : (اختياري) الألوان التي يجب إضافتها إلى اللوحة ، سيتم ملء الاختلافات في الألواح الموجودة بالقيمة الافتراضية. Font.palettes.delete(paletteIndex)يحذف لوحة من فهرسها الصفر
paletteIndex : فهرس لوح قائم على الصفر Font.palettes.deleteColor(colorIndex, replacementIndex)يحذف فهرس ملون معين في جميع اللوحات ويحديث جميع الطبقات باستخدام هذا اللون مع اللون الذي تم الاحتفاظ به حاليًا في فهرس الاستبدال
colorIndex : فهرس اللون الذي يجب حذفهreplacementIndex : فهرس (وفقًا للوحة قبل الحذف) من اللون لاستبداله في الطبقات باستخدام اللون المراد حذفه Font.palettes.cpal()إرجاع جدول CPAL للخط ، أو خطأ إذا لم يكن موجودًا. تستخدم داخليا.
Font.palettes.ensureCPAL(colors)تستخدم بشكل أساسي داخليًا. تأكد من وجود جدول CPAL أو يتم ملؤه بالقيم الافتراضية.
colors : (اختياري) الألوان التي تملأ على الإنشاء تُرجع true إذا تم إنشاؤها ، false إذا كانت موجودة بالفعل. Font.palettes.extend(num)تمديد جميع اللوحات الموجودة وقيمة Numpaletetyentries بعدد من فتحات الألوان
num : عدد فتحات الألوان الإضافية التي يجب إضافتها إلى جميع اللوحات Font.palettes.fillPalette(palette, colors, colorCount) يملأ مجموعة من ألوان اللوحة (من فهرس لوحة ، أو مجموعة من قيم ألوان CPAL) مع مجموعة من الألوان ، وتراجع إلى قيمة اللون الافتراضي ، حتى عدد معين. لا يعدل اللوحة الحالية ، وإعادة صفيف جديد بدلاً من ذلك! استخدم Font.palettes.setColor() بدلاً من ذلك إذا لزم الأمر.
palette : فهرس لوح أو مجموعة من قيم الألوان cpal لملء اللوحة ، سيتم ملء الباقي باللون الافتراضيcolors : مجموعة من قيم الألوان لملء اللوحة ، بتنسيق مدعوم كإخراج من colorFormat في {glyphrenderoptions} ، انظر Font.getPath() . يتم دعم أسماء الألوان CSS أيضًا في سياق المتصفح.colorCount : عدد الألوان لملء اللوحة ، الافتراضية لقيمة حقل Numpaletetyentries Font.palettes.getAll(colorFormat)إرجاع مجموعة من المصفوفات من قيم الألوان لكل لوحة ، اختياريا بتنسيق لون محدد
colorFormat : (اختياري) انظر {glyphrenderoptions} في Font.getPath() ، (الافتراضي: "hexa" ) Font.palettes.getColor(index, paletteIndex, colorFormat)احصل على لوحة محددة من فهرسها الصفر
index : فهرس قائم على الصفر للون في اللوحةpaletteIndex : فهرس لوحة قائم على الصفر (افتراضي: 0)colorFormat : (اختياري) انظر {glyphrenderoptions} في Font.getPath() ، (الافتراضي: "hexa" ) Font.palettes.get(paletteIndex, colorFormat)احصل على لوحة محددة من فهرسها الصفر
paletteIndex : فهرس لوح قائم على الصفرcolorFormat : (اختياري) انظر {glyphrenderoptions} في Font.getPath() ، (الافتراضي: "hexa" ) Font.palettes.setColor(index, colors, paletteIndex)قم بتعيين لون واحد أو أكثر على لوحة معينة من فهرسها الصفر
index : فهرس ملون قائم على الصفر لبدء ملء منcolor : قيمة اللون أو صفيف من قيم الألوان في تدوين الألوان المدعوم كمخرج من colorFormat في {glyphrenderoptions} ، انظر Font.getPath() . يتم دعم أسماء الألوان CSS أيضًا في سياق المتصفح.paletteIndex : فهرس لوحة قائم على الصفر (افتراضي: 0) Font.palettes.toCPALcolor(color)يحول سلسلة قيمة الألوان إلى قيمة لون عدد صحيح CPAL
color : سلسلة في تدوين اللون مدعوم كمخرج من colorFormat في {glyphrenderoptions} ، انظر Font.getPath() . يتم دعم أسماء الألوان CSS أيضًا في سياق المتصفح. Font.layers ( LayerManager )يسمح ذلك بإدارة طبقات الأسلوب الرمزي في جدول COLR ، دون الحاجة إلى تعديل الجدول يدويًا.
Font.layers.add(glyphIndex, layers, position)يضيف طبقة واحدة أو أكثر إلى حروف رسومية ، في النهاية أو في موضع معين.
glyphIndex : فهرس Glyph لإضافة الطبقة (الطبقات) إلى.layers : كائن طبقة {glyph ، paletteIndex}/{glyphid ، paletteIndex} أو صفيف كائنات الطبقة.position : موقف لإدراج الطبقات في (سوف تكون افتراضية للإضافة في النهاية). Font.layers.ensureCOLR()تستخدم بشكل أساسي داخليًا. يضمن وجود جدول COLR ويتم ملؤه بالقيم الافتراضية.
Font.layers.get(glyphIndex)يحصل على الطبقات لخبرق محدد
glyphIndex مجموعة من {glyph, paletteIndex} كائنات الطبقة. Font.layers.remove(glyphIndex, start, end = start)يزيل طبقة واحدة أو أكثر من الرسول الرمزية.
glyphIndex : فهرس Glyph لإزالة الطبقة (الطبقات) منstart : فهرس لإزالة الطبقة فيend : (اختياري) إذا تم توفيره ، يزيل جميع الطبقات من فهرس البدء إلى (بما في ذلك) فهرس النهاية Font.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)يضع خاصية لوحة لوحة Glyph's BaletteIndex إلى فهرس جديد
glyphIndex : Glyph in the Font by Zero Glyph IndexlayerIndex : طبقة في الحروف الرسومية بواسطة فهرس الطبقة الصفرpaletteIndex : لون جديد لضبطه للطبقة بواسطة فهرس قائم على الصفر في أي لوحة Font.layers.updateColrTable(glyphIndex, layers)تستخدم بشكل أساسي داخليًا. يقوم بتحديث جدول COLR ، مع إضافة baseglyphrecord إذا لزم الأمر ، مع التأكد من إدراجه في الموضع الصحيح ، وتحديث numlayers ، وضبط قيم FirstLayerIndex لجميع baseglyphreecords وفقًا لأي عمليات حذف أو إدراج.
Font.variation ( VariationManager ) يتولى VariationManager خصائص الخط المتغير باستخدام جداول تباين الخط Opentype.
Font.variation.activateDefaultVariation()ينشط التباين الافتراضي عن طريق تعيين بيانات التباين الخاصة به كخيارات عرض افتراضية للخط. يستخدم المثيل الافتراضي إذا كان متاحًا ؛ خلاف ذلك ، فإنه يتخلف عن إحداثيات جميع المحاور.
Font.variation.getDefaultCoordinates()إرجاع الإحداثيات الافتراضية لمحاور تباين الخط.
Font.variation.getDefaultInstanceIndex() يحدد وإرجاع فهرس مثيل التباين الافتراضي. إرجاع -1 إذا كان لا يمكن تحديده.
-1 . Font.variation.getTransform(glyph, coords) مجرد اختصار لـ Font.variation.process.getTransform() .
Font.variation.getInstanceIndex(coordinates) يجد فهرس مثيل التباين الذي يطابق الإحداثيات المقدمة ، أو -1 إذا لم يتطابق مع أي منها.
coordinates : كائن مع علامات المحور كمفاتيح وقيم التباين كقيم المقابلة.-1 . Font.variation.getInstance(index)يسترجع مثيل تباين محدد من خلال فهرسه القائم على الصفر.
index : فهرس قائم على الصفر لمثيل التباين.null إذا كان الفهرس غير صالح. Font.variation.set(instanceIdOrObject)يضبط إحداثيات التباين المراد استخدامها افتراضيًا لتقديم خيارات العرض الافتراضية للخط.
instanceIdOrObject : إما الفهرس القائم على الصفر لمثيل التباين أو علامات محور رسم خرائط كائن إلى قيم التباين. Font.variation.get()يحصل على إعدادات التباين الحالية من خيارات العرض الافتراضية للخط.
Font.variation.process ( VariationProcessor ) يعد VariationProcessor مكونًا من مكونات VariationManager ، ويستخدم بشكل أساسي داخليًا للحساب وتطبيق الاختلافات على الحروف الرسومية في خط متغير. إنه يتعامل مع التحولات والتعديلات بناءً على محاور وحالات المتغير للخط.
Font.variation.process.getNormalizedCoords(coords)إرجاع الإحداثيات الطبيعية لمحاور التباين بناءً على الإعدادات الحالية.
coords : كائن الإحداثيات للتطبيع (أو التنسيقات في خطوط الخط بشكل defaultRenderOptions )Font.variation.process.interpolatePoints(points, deltas, scalar)يتداخل النقاط على أساس الدلتا المقدمة وقيمة العددية.
points : مجموعة من النقاط الأصلية.deltas : مجموعة من Point Deltas.scalar : القيمة العددية للاستيفاء.Font.variation.process.deltaInterpolate(original, deltaValues, scalar)يحسب القيمة المحرف لنقطة واحدة تعطى القيم الأصلية ، الدلتا ، وقدر.
original : القيمة الأصلية للنقطة.deltaValues : مجموعة من قيم الدلتا لهذه النقطة.scalar : القيمة العددية للاستيفاء.Font.variation.process.deltaShift(points, deltas)يطبق قيم دلتا على تحويل النقاط.
points : مجموعة من النقاط الأصلية.deltas : مجموعة من Deltas لتطبيق.Font.variation.process.transformComponents(components, transformation)يحوّل مكونات Glyph باستخدام مصفوفة تحويل محددة.
components : مكونات الرسول الرسمية.transformation : مصفوفة التحول لتطبيق.Font.variation.process.getTransform(glyph, coords)يسترجع نسخة محولة من الرسوم الرسمية بناءً
glyph : Glyph أو فهرس الحروف الرسومية للتحويل.coords : كائن التنسيق التباين (أو تنسيقات الاختلاف في خطوط الخط بشكل defaultRenderOptions )opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)يحسب التعديل المتغير لمعلمة ضبط معينة.
adjustment : معلمة التعديل.Font.variation.process.getDelta(deltas)يحدد قيم الدلتا المناسبة من مجموعة من الدلتا بناءً على إعدادات التباين الحالية.
deltas : مجموعة من قيم الدلتا.Font.variation.process.getBlendVector()يحسب ناقل المزيج للاستيفاءات بناءً على الإعدادات الحالية.
الرسول الرمزية هي علامة فردية تتوافق غالبًا مع الحرف. بعض الحروف الرسومية ، مثل Ligatures ، هي مزيج من العديد من الشخصيات. الحروف الرسومية هي لبنات البناء الأساسية للخط.
font : إشارة إلى كائن الخط.name : اسم الرسول الرسمية (على سبيل المثال "Aring" ، "five" )unicode : قيمة Unicode الأولية لهذا الرماية (يمكن أن تكون undefined ).unicodes : قائمة قيم Unicode لهذا الغليف (معظم الوقت سيكون هذا 1 ، يمكن أن تكون فارغة أيضًا).index : رقم فهرس الحروف الرسومية.advanceWidth : العرض لتعزيز القلم عند رسم هذا الرحم.leftSideBearing : المسافة الأفقية من الحرف السابق إلى الأصل ( 0, 0 ) ؛ تشير القيمة السالبة إلى تراكمxMin ، yMin ، xMax ، yMax : المربع المحيط بالأحرف الرمزية.path : المسار الخام ، غير المنقوش من الرسوم الهزلية. Glyph.getPath(x, y, fontSize, options, font)احصل على كائن مسار Glyph المقيس للاستخدام في سياق الرسم.
x : الموضع الأفقي للرسوم الرسومية. (افتراضي: 0 )y : الموضع الرأسي لخط الأساس من الرسول الرسومية. (افتراضي: 0 )fontSize : حجم الخط بالبكسل (افتراضي: 72 ).options : {glyphrenderoptions} ، انظر Font.getPath()font : كائن خط ، مطلوب لتقديم خطوط COLR/CPAL للحصول على الطبقات والألوان Glyph.getBoundingBox() احسب المربع الحد الأدنى للمسار غير المنحدر من الرسول الرمزية المعطاة. إرجاع كائن opentype.BoundingBox الذي يحتوي على x1 / y1 / x2 / y2 . إذا لم يكن لدى الرسوم الرسمية نقاط (مثل حرف فضاء) ، فستكون جميع الإحداثيات صفرًا.
Glyph.draw(ctx, x, y, fontSize, options, font)ارسم الرسوم الرمزية على السياق المعطى.
ctx : سياق الرسم.x : الموضع الأفقي للرسوم الرسومية. (افتراضي: 0 )y : الموضع الرأسي لخط الأساس من الرسول الرسومية. (افتراضي: 0 )fontSize : حجم الخط ، بالبكسل (افتراضي: 72 ).options : {glyphrenderoptions} ، انظر Font.getPath()font : كائن خط ، مطلوب لتقديم خطوط COLR/CPAL للحصول على الطبقات والألوان Glyph.drawPoints(ctx, x, y, fontSize, options, font) ارسم نقاط الرحم على السياق المحدد. سيتم رسم نقاط على المنحنى باللون الأزرق ، وسيتم رسم نقاط خارج المنحنى باللون الأحمر. الحجج هي نفس Glyph.draw() .
Glyph.drawMetrics(ctx, x, y, fontSize) رسم خطوط تشير إلى قياسات الخط الهامة لجميع الحروف الرسومية في النص. تشير الخطوط السوداء إلى أصل نظام الإحداثيات (النقطة 0،0). الخطوط الزرقاء تشير إلى مربع حدود الرسول الرمزية. الخط الأخضر يشير إلى العرض المتقدم للرسوم الرسومية. الحجج هي نفس Glyph.draw() .
Glyph.toPathData(options) ، Glyph.toDOMElement(options) ، Glyph.toSVG(options) ، Glyph.fromSVG(pathData, options) ،هذه حاليًا فقط وظائف غلاف لنظيراتها على كائنات المسار (انظر الوثائق هناك) ، ولكن قد يتم تمديدها في المستقبل لتمرير بيانات الرسول الرسمية للحساب التلقائي.
Glyph.getLayers(font)يحصل على طبقات الأسلوب الملون لهذا الرسول الرمزية من جداول COLR/CPAL الخط المحدد
بمجرد أن يكون لديك مسار من خلال Font.getPath() أو Glyph.getPath() ، يمكنك استخدامه.
commands : أوامر المسار. كل أمر هو قاموس يحتوي على نوع وإحداثيات. انظر أدناه للحصول على أمثلة.fill : لون ملء المسار. اللون هو سلسلة تمثل لون CSS. (افتراضي: 'black' )stroke : لون السكتة الدماغية Path . اللون هو سلسلة تمثل لون CSS. (الافتراضي: null ؛ لن يتم ضرب المسار)strokeWidth : سماكة خط Path . (افتراضي: 1 ، ولكن إذا كانت stroke null فلن يتم سحب السكتة الدماغية) Path.draw(ctx) ارسم المسار على السياق 2D المعطى. هذا يستخدم خصائص fill stroke strokeWidth لكائن المسار.
ctx : سياق الرسم. Path.getBoundingBox() احسب المربع الحد الأدنى للمسار المحدد. إرجاع كائن opentype.BoundingBox الذي يحتوي على x1 / y1 / x2 / y2 . إذا كان المسار فارغًا (على سبيل المثال حرف فضاء) ، فستكون جميع الإحداثيات صفرًا.
Path.toPathData(options)تحويل المسار إلى سلسلة من تعليمات بيانات المسار. انظر https://www.w3.org/tr/svg/paths.html#pathdata
options :decimalPlaces : كمية الأماكن العشرية لقيم الفاصلة العائمة. (افتراضي: 2 )optimize : تطبيق بعض التحسينات على بيانات المسار ، على سبيل المثال إزالة الأوامر غير الضرورية/المكررة (صواب/خطأ ، افتراضي: true )flipY : ما إذا كان يجب قلب محور Y لبيانات المسار ، لأن مسارات SVG وخط الخطية تستخدم محاور Y المقلوبة. ( true : حساب من مربع المحيط ، false : تعطيل ؛ الافتراضي: true )flipYBase : القيمة الأساسية لحساب التقليب الأساسي. من المحتمل أن ترغب في حساب هذا من قيم الصعود والسليل للخط. (افتراضي: احسب تلقائيًا من مربع حرج بيانات المسار) Path.toSVG(options) قم بتحويل المسار إلى عنصر SVG <path> ، كسلسلة.
options : انظر Path.toPathData() Path.fromSVG(pathData, options)استرداد المسار من بيانات مسار SVG.
إما الكتابة فوق بيانات المسار لمسار موجود:
const path = new Path ( ) ;
path . fromSVG ( 'M0 0' ) ;أو إنشاء مسار جديد مباشرة:
const path = Path . fromSVG ( 'M0 0' ) ;pathData : إما سلسلة من أوامر مسار SVGPathElement ، أو (فقط في سياق المتصفح)options :decimalPlaces ، optimize ، flipY ، flipYBase : انظر Path.toPathData()scale : قيمة التحجيم المطبقة على جميع إحداثيات الأوامر (الافتراضي: 1 )x / y : تم تطبيق إزاحة على جميع إحداثيات الأوامر على محور X أو Y (افتراضي: 0 ) {type: 'M', x: 100, y: 200}{type: 'L', x: 100, y: 200}{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}{type: 'Z'} نستخدم Semver للنسخة.
معهد ماساتشوستس للتكنولوجيا
نود أن نعترف بعمل الآخرين الذين بدونه لن يكون Opentype.js ممكنًا:
