opentype.js
1.3.4
มันช่วยให้คุณเข้าถึง รูปแบบตัวอักษร ของข้อความจากเบราว์เซอร์หรือโหนด
ดู 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% แต่การบีบอัดนี้ยังซับซ้อนมากขึ้นและจะส่งผลให้ไลบรารี Opentype.js ที่หนักกว่ามาก (> 10 ×!) (≈120KB => ≈1400KB)
เพื่อแก้ปัญหานี้: บีบอัดฟอนต์ล่วงหน้า (ตัวอย่างเช่น 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 ) ) ;นอกจากนี้ยังเป็นไปได้ที่จะสร้างแบบอักษรตั้งแต่เริ่มต้นด้วยการกำหนดเส้นทาง Glyph Bézierแต่ละเส้นทาง
// 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 : รายการดัชนีของวัตถุ GlyphunitsPerEm : พิกัด X/Y ในแบบอักษรจะถูกเก็บไว้เป็นจำนวนเต็ม ค่านี้กำหนดขนาดของกริด ค่าทั่วไปคือ 2048 และ 4096ascender : ระยะทางจากพื้นฐานของ Ascender สูงสุด ในหน่วยฟอนต์ไม่ใช่พิกเซลdescender : ระยะทางจากพื้นฐานของ descender ต่ำสุด ในหน่วยฟอนต์ไม่ใช่พิกเซล Font.getPath(text, x, y, fontSize, options)สร้างเส้นทางที่แสดงถึงข้อความที่กำหนด
x : ตำแหน่งแนวนอนของการเริ่มต้นของข้อความ (ค่าเริ่มต้น: 0 )y : ตำแหน่งแนวตั้งของ พื้นฐาน ของข้อความ (ค่าเริ่มต้น: 0 )fontSize : ขนาดของข้อความเป็นพิกเซล (ค่าเริ่มต้น: 72 )options : {glyphrenderoptions} ส่งผ่านไปยังแต่ละ glyph ดูด้านล่างตัวเลือกคือวัตถุ {glyphrenderoptions} เป็นทางเลือกที่มี:
script : สคริปต์ที่ใช้ในการกำหนดคุณสมบัติที่จะนำไปใช้ (ค่าเริ่มต้น: "DFLT" หรือ "latn" )language : ระบบภาษาที่ใช้ในการกำหนดคุณสมบัติที่จะนำไปใช้ (ค่าเริ่มต้น: "dflt" )kerning : ถ้าจริงจะคำนึงถึงข้อมูล kerning ในบัญชี (ค่าเริ่มต้น: true )features : วัตถุที่มีแท็กคุณสมบัติ Opentype เป็นคีย์และค่าบูลีนเพื่อเปิดใช้งานแต่ละคุณสมบัติ ปัจจุบันมีเพียงคุณสมบัติการเชื่อมโยง "liga" และ "rlig" เท่านั้นที่รองรับ (ค่าเริ่มต้น: true )hinting : หาก TRUE ใช้แบบอักษร Truetype บอกเป็นนัยถ้ามี (ค่าเริ่มต้น: false )colorFormat : รูปแบบสีจะถูกแปลงเป็นสำหรับการแสดงผล (ค่าเริ่มต้น: "hexa" ) สามารถเป็น "rgb" / "rgba" สำหรับ rgb() / rgba() เอาท์พุท, "hex" / "hexa" สำหรับ 6/8 หลัก hex สีหรือ "hsl" / "hsla" สำหรับ hsl() / hsla() "bgra" ส่งออกวัตถุด้วย R, G, B, ปุ่ม (R/G/B จาก 0-255, A จาก 0-1) "raw" ส่งออกเป็นจำนวนเต็มตามที่ใช้ในตาราง CPALfill : สีตัวอักษรสีที่ใช้ในการแสดงแต่ละ glyph (ค่าเริ่มต้น: "black" ) หมายเหตุ: นอกจากนี้ยังมี Font.getPaths() ที่มีอาร์กิวเมนต์เดียวกันซึ่งส่งคืนรายการเส้นทาง
Font.draw(ctx, text, x, y, fontSize, options)สร้างเส้นทางที่แสดงถึงข้อความที่กำหนด
ctx : บริบทการวาดแบบ 2D เช่นผ้าใบx : ตำแหน่งแนวนอนของการเริ่มต้นของข้อความ (ค่าเริ่มต้น: 0 )y : ตำแหน่งแนวตั้งของ พื้นฐาน ของข้อความ (ค่าเริ่มต้น: 0 )fontSize : ขนาดของข้อความเป็นพิกเซล (ค่าเริ่มต้น: 72 )options : {glyphrenderoptions} ส่งผ่านไปยังแต่ละ glyph ดู 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) เส้นสีน้ำเงินหมายถึงกล่อง Glyph Bounding เส้นสีเขียวแสดงถึงความกว้างล่วงหน้าของร่ายมนตร์
Font.stringToGlyphs(string)แปลงสตริงเป็นรายการของวัตถุ Glyph โปรดทราบว่าไม่มีการติดต่อ 1 ถึง 1 ที่เข้มงวดระหว่างสตริงและรายการ Glyph เนื่องจากการทดแทนที่เป็นไปได้เช่น ligatures รายการร่ายมนตร์ที่ส่งคืนอาจมีขนาดใหญ่กว่าหรือเล็กกว่าความยาวของสตริงที่กำหนด
Font.charToGlyph(char) แปลงอักขระเป็นวัตถุ Glyph ส่งคืนค่า null หากไม่พบสัญลักษณ์ โปรดทราบว่าฟังก์ชั่นนี้ถือว่ามีการแมปแบบหนึ่งต่อหนึ่งระหว่างตัวละครที่กำหนดและสัญลักษณ์ สำหรับสคริปต์ที่ซับซ้อนนี่อาจไม่ใช่กรณี
Font.getKerningValue(leftGlyph, rightGlyph) ดึงค่าของคู่ kerning ระหว่าง glyph ซ้าย (หรือดัชนี) และ glyph ขวา (หรือดัชนี) หากไม่พบคู่ kerning ให้กลับ 0 ค่า kerning จะถูกเพิ่มลงในความกว้างล่วงหน้าเมื่อคำนวณระยะห่างระหว่างร่ายมนตร์
Font.getAdvanceWidth(text, fontSize, options)ส่งคืนความกว้างล่วงหน้าของข้อความ
นี่คือสิ่งที่แตกต่างจาก Path.getBoundingBox() ; ตัวอย่างเช่นช่องว่างด้านต่อท้ายเพิ่มขึ้น AdvanceWidth แต่ไม่ใช่กล่องที่มีขอบเขตหรือตัวอักษรที่ยื่นออกมาเช่นการประดิษฐ์ตัวอักษร 'F' อาจมีกล่องขอบเขตที่ค่อนข้างใหญ่กว่าความกว้างล่วงหน้า
สิ่งนี้สอดคล้องกับ canvas2dContext.measureText(text).width
fontSize : ขนาดของข้อความเป็นพิกเซล (ค่าเริ่มต้น: 72 )options : {glyphrenderoptions} , ดู Font.getPath() Font.palettes Object ( 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)ขยายพาเล็ตที่มีอยู่ทั้งหมดและค่า numpaletteentries โดยจำนวนช่องสีจำนวนหนึ่ง
num : จำนวนช่องสีเพิ่มเติมเพื่อเพิ่มลงในจานสีทั้งหมด Font.palettes.fillPalette(palette, colors, colorCount) เติมชุดของสีจานสี (จากดัชนีจานสีหรืออาร์เรย์ของค่าสี CPAL ที่ให้ไว้) ด้วยชุดของสีลดลงกลับไปที่ค่าสีเริ่มต้นจนกระทั่งจำนวนที่กำหนด มันไม่ได้แก้ไขจานสีที่มีอยู่ส่งคืนอาร์เรย์ใหม่แทน! ใช้ Font.palettes.setColor() แทนถ้าจำเป็น
palette : ดัชนีจานสีหรืออาร์เรย์ของค่าสี cpal เพื่อเติมเต็มจานสีส่วนที่เหลือจะเต็มไปด้วยสีเริ่มต้นcolors : อาร์เรย์ของค่าสีเพื่อเติมเต็มจานสีด้วยในรูปแบบที่รองรับเป็นเอาต์พุตของ colorFormat ใน {glyphrenderoptions} ดู Font.getPath() ชื่อสี CSS ยังรองรับในบริบทของเบราว์เซอร์colorCount : จำนวนสีเพื่อเติมเต็มจานสีด้วยค่าเริ่มต้นเป็นค่าของฟิลด์ numpaletteentries 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 )สิ่งนี้ช่วยให้สามารถจัดการเลเยอร์ Glyph สีในตาราง Colr โดยไม่ต้องปรับเปลี่ยนตารางด้วยตนเอง
Font.layers.add(glyphIndex, layers, position)เพิ่มหนึ่งชั้นขึ้นไปใน Glyph ในตอนท้ายหรือที่ตำแหน่งที่เฉพาะเจาะจง
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)ตั้งค่าคุณสมบัติ PaletteIndex ของ Glyph Layer เป็นดัชนีใหม่
glyphIndex : Glyph ในตัวอักษรโดยดัชนี Glyph-based zero-basedlayerIndex : เลเยอร์ใน Glyph โดยดัชนีเลเยอร์ที่อิงกับศูนย์paletteIndex : สีใหม่ที่จะตั้งค่าสำหรับดัชนีเลเยอร์โดยศูนย์ในจานสีใด ๆ Font.layers.updateColrTable(glyphIndex, layers)ส่วนใหญ่ใช้ภายใน อัปเดตตาราง COLR เพิ่ม baseGlyPhrecord หากจำเป็นเพื่อให้แน่ใจว่าได้รับการแทรกที่ตำแหน่งที่ถูกต้องอัปเดต numlayers และปรับค่า FirstLayerIndex สำหรับ baseGlyphrecords ทั้งหมดตามการลบหรือการแทรกใด ๆ
Font.variation Object ( 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 Object ( VariationProcessor ) VariationProcessor เป็นส่วนประกอบของ VariationManager ที่ใช้เป็นหลักในการคำนวณและใช้การเปลี่ยนแปลงกับร่ายมนตร์ในตัวอักษรตัวแปร มันจัดการกับการแปลงและการปรับตามแกนและอินสแตนซ์ตัวแปรของตัวอักษร
Font.variation.process.getNormalizedCoords(coords)ส่งคืนพิกัดปกติสำหรับแกนการแปรผันตามการตั้งค่าปัจจุบัน
coords : พิกัดวัตถุที่จะทำให้เป็นปกติ (หรือการเปลี่ยนแปลง Coords ใน defaultRenderOptions ของตัวอักษรโดยค่าเริ่มต้น)Font.variation.process.interpolatePoints(points, deltas, scalar)การแก้ไขคะแนนตาม Deltas ที่ให้ไว้และค่าสเกลาร์
points : อาร์เรย์ของคะแนนดั้งเดิมdeltas : Array of Point Deltasscalar : ค่าสเกลาร์สำหรับการแก้ไขFont.variation.process.deltaInterpolate(original, deltaValues, scalar)คำนวณค่าที่ถูกแก้ไขสำหรับจุดเดียวที่กำหนดค่าดั้งเดิม Deltas และสเกลาร์
original : ค่าดั้งเดิมของจุดdeltaValues : อาร์เรย์ของค่าเดลต้าสำหรับจุดscalar : ค่าสเกลาร์สำหรับการแก้ไขFont.variation.process.deltaShift(points, deltas)ใช้ค่าเดลต้ากับจุดเปลี่ยน
points : อาร์เรย์ของคะแนนดั้งเดิมdeltas : อาร์เรย์ของ Deltas ที่จะสมัครFont.variation.process.transformComponents(components, transformation)แปลงส่วนประกอบของร่ายมนตร์โดยใช้เมทริกซ์การแปลงที่ระบุ
components : ส่วนประกอบของ Glyphtransformation : เมทริกซ์การแปลงที่จะใช้Font.variation.process.getTransform(glyph, coords)ดึงสำเนาที่แปลงแล้วของ glyph ตามพิกัดการเปลี่ยนแปลงที่ให้มาหรือ glyph เองหากไม่มีการเปลี่ยนแปลง
glyph : Glyph หรือดัชนีของ Glyph เพื่อแปลงcoords : การแปรผันของวัตถุ Coords (หรือการเปลี่ยนแปลง Coords ใน defaultRenderOptions ของตัวอักษรโดยค่าเริ่มต้น)opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)คำนวณการปรับตัวแปรสำหรับพารามิเตอร์การปรับที่กำหนด
adjustment : พารามิเตอร์การปรับFont.variation.process.getDelta(deltas)เลือกค่าเดลต้าที่เหมาะสมจากคอลเลกชันของ Deltas ตามการตั้งค่าการเปลี่ยนแปลงปัจจุบัน
deltas : การรวบรวมค่าเดลต้าFont.variation.process.getBlendVector()คำนวณเวกเตอร์ผสมผสานสำหรับการแก้ไขตามการตั้งค่าปัจจุบัน
สัญลักษณ์เป็นเครื่องหมายบุคคลที่มักจะสอดคล้องกับตัวละคร ร่ายมนตร์บางตัวเช่น ligatures เป็นการรวมกันของตัวละครหลายตัว ร่ายมนตร์เป็นหน่วยการสร้างพื้นฐานของตัวอักษร
font : การอ้างอิงถึงวัตถุแบบอักษรname : The Glyph Name (เช่น "Aring" , "five" ))unicode : ค่า Unicode หลักของ Glyph นี้ (สามารถ undefined )unicodes : รายการค่า unicode สำหรับ glyph นี้ (ส่วนใหญ่เวลานี้จะเป็น 1 สามารถว่างเปล่า)index : หมายเลขดัชนีของ GlyphadvanceWidth : ความกว้างในการเลื่อนปากกาเมื่อวาดสัญลักษณ์นี้leftSideBearing : ระยะทางแนวนอนจากอักขระก่อนหน้าไปยังจุดกำเนิด ( 0, 0 ); ค่าลบแสดงถึงสิ่งที่ยื่นออกมาxMin , yMin , xMax , yMax : กล่องขอบเขตของ glyphpath : เส้นทางดิบที่ไม่ได้รับการปรับขนาดของ Glyph Glyph.getPath(x, y, fontSize, options, font)รับวัตถุเส้นทาง Glyph ที่ปรับขนาดเพื่อใช้ในบริบทการวาด
x : ตำแหน่งแนวนอนของ Glyph (ค่าเริ่มต้น: 0 )y : ตำแหน่งแนวตั้งของ พื้นฐาน ของ Glyph (ค่าเริ่มต้น: 0 )fontSize : ขนาดตัวอักษรเป็นพิกเซล (ค่าเริ่มต้น: 72 )options : {glyphrenderoptions} , ดู Font.getPath()font : วัตถุตัวอักษรที่จำเป็นสำหรับการแสดงผลแบบอักษร COLR/CPAL เพื่อให้ได้เลเยอร์และสี Glyph.getBoundingBox() คำนวณกล่องขอบเขตขั้นต่ำสำหรับเส้นทางที่ไม่ได้ลดระดับของ Glyph ที่กำหนด ส่งคืนวัตถุ opentype.BoundingBox ที่มี x1 / y1 / x2 / y2 หาก Glyph ไม่มีคะแนน (เช่นอักขระอวกาศ) พิกัดทั้งหมดจะเป็นศูนย์
Glyph.draw(ctx, x, y, fontSize, options, font)วาดสัญลักษณ์ในบริบทที่กำหนด
ctx : บริบทการวาดx : ตำแหน่งแนวนอนของ Glyph (ค่าเริ่มต้น: 0 )y : ตำแหน่งแนวตั้งของ พื้นฐาน ของ Glyph (ค่าเริ่มต้น: 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 Bounding เส้นสีเขียวแสดงถึงความกว้างล่วงหน้าของร่ายมนตร์ อาร์กิวเมนต์เหมือนกับ Glyph.draw()
Glyph.toPathData(options) , Glyph.toDOMElement(options) , Glyph.toSVG(options) , Glyph.fromSVG(pathData, options) ,ในปัจจุบันเป็นฟังก์ชั่น wrapper สำหรับคู่ของพวกเขาในวัตถุเส้นทาง (ดูเอกสารที่นั่น) แต่อาจขยายออกไปในอนาคตเพื่อส่งผ่านข้อมูล Glyph สำหรับการคำนวณอัตโนมัติ
Glyph.getLayers(font)รับเลเยอร์ Glyph สีสำหรับ Glyph นี้จากตาราง 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 : ค่าพื้นฐานสำหรับการคำนวณการพลิกฐาน คุณอาจต้องการคำนวณสิ่งนี้จากค่า Ascender และ Descender ของตัวอักษร (ค่าเริ่มต้น: คำนวณโดยอัตโนมัติจากกล่องขอบเขตของข้อมูลพา ธ ) 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 : ทั้งสตริงของคำสั่ง SVG PATH หรือ (เฉพาะในบริบทของเบราว์เซอร์) SVGPathElementoptions :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 จะเป็นไปไม่ได้:
