opentype.js
1.3.4
Sie erhalten Zugriff auf die Buchstabenformen des Textes aus dem Browser oder Node.js.
Eine Live -Demo finden Sie unter https://opentype.js.org/.
glyf und PostScript cff -Umrissen)Wählen Sie im nächsten Beispiel eine der folgenden Quellen aus:
<!-- 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'Verwenden von TypeScript? Siehe dieses Beispiel
Wenn Sie opentype.js verbessern oder debuggen möchten, können Sie:
git clone git://github.com/yourname/opentype.js.gitcd opentype.js einnpm installnpm run buildnpm run start und navigieren Sie zum Ordner /docsnpm run test noch gut funktionieren Dies geschieht in zwei Schritten: Erstens laden wir die Schriftart in einen 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 ( ) ; ... dann wir .parse() in eine 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 -Komprimierung führen 29% besser ab als der WOFF -Vorgänger. Diese Komprimierung ist aber auch komplexer und würde zu einer viel schwereren (> 10 ×!) Openentype.js -Bibliothek (~ 120KB => ~ 1400 KB) führen.
Um dies zu lösen: Dekomprimieren Sie die Schrift im Voraus (z. B. mit 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 ) ) ;Es ist auch möglich, eine Schriftart von Grund auf neu zu erstellen, indem sie jede Glyphen -Bézier -Pfade definieren.
// 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 ] } ) ; Sobald Sie ein Font haben (vom Handwerk oder von .parse() ), können Sie es als Datei wieder speichern.
// 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 ( ) ;Eine Schriftart stellt eine geladene Openentyp -Schriftart dar. Es enthält eine Reihe von Glyphen und Methoden, um Text in einen Zeichnungskontext zu zeichnen oder einen Pfad zu erhalten, der den Text darstellt.
glyphs : Eine indizierte Liste von Glyphenobjekten.unitsPerEm : X/Y -Koordinaten in Schriftarten werden als Ganzzahlen gespeichert. Dieser Wert bestimmt die Größe des Netzes. Häufige Werte sind 2048 und 4096 .ascender : Entfernung von der Ausgangslinie des höchsten Ascenders. In Schriftgeräten, nicht in Pixeln.descender : Entfernung von der Ausgangslinie des niedrigsten Abstiegs. In Schriftgeräten, nicht in Pixeln. Font.getPath(text, x, y, fontSize, options)Erstellen Sie einen Pfad, der den angegebenen Text darstellt.
x : Horizontale Position des Textes. (Standard: 0 )y : vertikale Position der Grundlinie des Textes. (Standard: 0 )fontSize : Größe des Textes in Pixel (Standard: 72 ).options : {Glyphrenderoptions} Übergeben an jede Glyphe, siehe untenOptionen sind ein optionales {Glyphrenderoptions} -Optat, das enthält:
script : Skript, das verwendet wird, um zu bestimmen, welche Funktionen angewendet werden sollen (Standard: "DFLT" oder "latn" )language : Sprachsystem verwendet, um zu bestimmen, welche Funktionen angewendet werden sollen (Standard: "dflt" )kerning : Wenn True Kerning -Informationen berücksichtigt (Standard: true )features : Ein Objekt mit OpenType -Feature -Tags als Schlüssel und einem booleschen Wert, um jede Funktion zu aktivieren. Derzeit werden nur Ligature "liga" und "rlig" unterstützt (Standard: true ).hinting : Wenn True TrueType -Schriftart verwendet, wenn verfügbar (Standard: false ).colorFormat : Die Formatfarben werden zum Rendern konvertiert (Standard: "hexa" ). Kann "rgb" / "rgba" für rgb() / rgba() output "hex" / "hexa" für 6 /8 -Ziffern -Hex -Farben oder "hsl" / "hsla" für hsl() / hsla() Output sein. "bgra" gibt ein Objekt mit R, G, B, A Tasten aus (r/g/b von 0-255, A von 0-1). "raw" gibt eine Ganzzahl aus, die in der CPAL -Tabelle verwendet wird.fill : Schriftfarbe, die Farbe, die zum Rendern jeder Glyphe verwendet wird (Standard: "black" ) Hinweis: Es gibt auch Font.getPaths() mit denselben Argumenten, die eine Liste von Pfaden zurückgeben.
Font.draw(ctx, text, x, y, fontSize, options)Erstellen Sie einen Pfad, der den angegebenen Text darstellt.
ctx : Ein 2D -Zeichnungskontext wie Leinwand.x : Horizontale Position des Textes. (Standard: 0 )y : vertikale Position der Grundlinie des Textes. (Standard: 0 )fontSize : Größe des Textes in Pixel (Standard: 72 ).options : {Glyphrenderoptions} Übergeben an jede Glyphe, siehe Font.getPath()Optionen sind ein optionales Objekt mit:
kerning : Wenn true , berücksichtigt Kerning -Informationen (Standard: true )features : Ein Objekt mit OpenType -Feature -Tags als Schlüssel und einem booleschen Wert, um jede Funktion zu aktivieren. Derzeit werden nur Ligature "liga" und "rlig" unterstützt (Standard: true ).hinting : Wenn True TrueType -Schriftart verwendet, wenn verfügbar (Standard: false ). Font.drawPoints(ctx, text, x, y, fontSize, options) Zeichnen Sie die Punkte aller Glyphen im Text. Auf den Kurven werden blau gezogen, Off-Kurve-Punkte werden rot gezogen. Die Argumente sind die gleichen wie Font.draw() .
Font.drawMetrics(ctx, text, x, y, fontSize, options)Zeichnen Sie Linien, die wichtige Schriftarten für alle Glyphen im Text anzeigen. Schwarze Linien geben den Ursprung des Koordinatensystems an (Punkt 0,0). Blaue Linien geben den Glyphen -Begrenzungsbox an. Die grüne Linie zeigt die Fortschritt der Glyphe an.
Font.stringToGlyphs(string)Konvertieren Sie die Zeichenfolge in eine Liste von Glyphenobjekten. Beachten Sie, dass zwischen der String- und Glyphenliste aufgrund möglicher Substitutionen wie Ligaturen keine strenge 1-zu-1-Korrespondenz besteht. Die Liste der zurückgegebenen Glyphen kann größer oder kleiner sein als die Länge der angegebenen Zeichenfolge.
Font.charToGlyph(char) Konvertieren Sie das Zeichen in ein Glyph -Objekt. Gibt null zurück, wenn der Glyphe nicht gefunden werden konnte. Beachten Sie, dass diese Funktion davon ausgeht, dass es eine Eins-zu-Eins-Zuordnung zwischen dem angegebenen Zeichen und einem Glyphen gibt. Für komplexe Skripte ist dies möglicherweise nicht der Fall.
Font.getKerningValue(leftGlyph, rightGlyph) Rufen Sie den Wert des Kerning -Paares zwischen dem linken Glyphen (oder seinem Index) und dem rechten Glyphen (oder seinem Index) ab. Wenn kein Kerning -Paar gefunden wird, kehren Sie 0 zurück. Der Kerning -Wert wird bei der Berechnung des Abstands zwischen Glyphen zur Vorweitbreite hinzugefügt.
Font.getAdvanceWidth(text, fontSize, options)Gibt die Fortschrittsbreite eines Textes zurück.
Dies ist etwas anderes als Path.getBoundingBox() ; Zum Beispiel erhöht ein Suffix -Whitespace die Advancedwidth, aber nicht das Begrenzungsfeld oder ein überhängender Brief wie ein kalligraphischer 'f' könnte ein ziemlich größeres Begrenzungsfeld haben als seine Vorabbreite.
Dies entspricht canvas2dContext.measureText(text).width
fontSize : Größe des Textes in Pixel (Standard: 72 ).options : {Glyphrenderoptions} , siehe Font.getPath() Font.palettes ( PaletteManager )Auf diese Weise können die Paletten und Farben in der CPAL -Tabelle verwaltet werden, ohne die Tabelle manuell ändern zu müssen.
Font.palettes.add(colors)Fügen Sie eine neue Palette hinzu.
colors : (optionale) Farben, die zur Palette hinzugefügt werden sollen, werden Unterschiede zu vorhandenen Paletten mit dem Standardwert gefüllt. Font.palettes.delete(paletteIndex)Löscht eine Palette durch ihren nullbasierten Index
paletteIndex : Null-basierter Palettenindex Font.palettes.deleteColor(colorIndex, replacementIndex)Löscht einen bestimmten Farbindex in allen Paletten und aktualisiert alle Ebenen mit dieser Farbe mit der Farbe, die derzeit im Ersatzindex enthalten ist
colorIndex : Index der Farbe, die gelöscht werden solltereplacementIndex : Index (gemäß der Palette vor dem Löschen) der Farbe, die in Schichten mit der Farbe zum Löschen ersetzt werden soll Font.palettes.cpal()Gibt die CPAL -Tabelle der Schriftart zurück oder falsch, wenn sie nicht existiert. Intern verwendet.
Font.palettes.ensureCPAL(colors)Hauptsächlich intern verwendet. Stellen Sie sicher, dass die CPAL -Tabelle vorhanden ist oder mit Standardwerten besiedelt ist.
colors : (optional) Farben, die auf der Erstellung füllen, gibt true , wenn es erstellt wurde, false wenn es bereits vorhanden ist. Font.palettes.extend(num)Erweitern Sie alle vorhandenen Paletten und den NumpaletteTries -Wert um eine Reihe von Farbsteckplätzen
num : Anzahl zusätzlicher Farbschlitze, die allen Paletten hinzugefügt werden können Font.palettes.fillPalette(palette, colors, colorCount) Füllt eine Reihe von Palettenfarben (aus einem Palettenindex oder ein bereitgestelltes Array von CPAL -Farbwerten) mit einer Reihe von Farben, die auf den Standardfarbwert zurückgreifen, bis eine bestimmte Anzahl von Zählungen ist. Es ändert die vorhandene Palette nicht und gibt stattdessen ein neues Array zurück! Verwenden Sie Font.palettes.setColor() statt bei Bedarf.
palette : Palettenindex oder eine Reihe von CPAL -Farbwerten, mit denen die Palette mit der Standardfarbe gefüllt werden kann, wird mit der Standardfarbe gefülltcolors : Array von Farbwerten zum Füllen der Palette mit einem Format, das als Ausgang von colorFormat in {Glyphrenderoptions} unterstützt wird, siehe Font.getPath() . CSS -Farbnamen werden auch im Browser -Kontext unterstützt.colorCount : Anzahl der Farben zum Füllen der Palette, standardmäßig zum Wert des Feldes NumpaletteEntries Font.palettes.getAll(colorFormat)Gibt eine Array von Farbwerten für jede Palette zurück, optional in einem angegebenen Farbformat
colorFormat : (optional) Siehe {Glyphrenderoptions} at Font.getPath() , (Standard: "hexa" ) Font.palettes.getColor(index, paletteIndex, colorFormat)Holen Sie sich eine bestimmte Palette nach seinem auf Null basierenden Index
index : Null-basierter Index der Farbe in der PalettepaletteIndex : Null-basierter Palettenindex (Standard: 0)colorFormat : (optional) Siehe {Glyphrenderoptions} at Font.getPath() , (Standard: "hexa" ) Font.palettes.get(paletteIndex, colorFormat)Holen Sie sich eine bestimmte Palette nach seinem auf Null basierenden Index
paletteIndex : Null-basierter PalettenindexcolorFormat : (optional) Siehe {Glyphrenderoptions} at Font.getPath() , (Standard: "hexa" ) Font.palettes.setColor(index, colors, paletteIndex)Legen Sie einen oder mehrere Farben auf einer bestimmten Palette durch ihren nullbasierten Index ein
index : Null-basierter Farbindex, um zu füllen, voncolor : Farbwert oder Array von Farbwerten in einer Farbnotation, die als Ausgabe von colorFormat in {Glyphrenderoptions} unterstützt wird, siehe Font.getPath() . CSS -Farbnamen werden auch im Browser -Kontext unterstützt.paletteIndex : Null-basierter Palettenindex (Standard: 0) Font.palettes.toCPALcolor(color)Konvertiert eine Farbwertzeichenfolge in einen CPal -Ganzzahl -Farbwert
color : Zeichenfolge in einer Farbnotation, die als Ausgabe von colorFormat in {Glyphrenderoptions} unterstützt wird, siehe Font.getPath() . CSS -Farbnamen werden auch im Browser -Kontext unterstützt. Font.layers ( LayerManager )Auf diese Weise können die Farbglyphenschichten in der COLR -Tabelle verwaltet werden, ohne die Tabelle manuell ändern zu müssen.
Font.layers.add(glyphIndex, layers, position)Fügt einem Glyphen am Ende oder an einer bestimmten Position eine oder mehrere Schichten hinzu.
glyphIndex : Glyphenindex, um die Schicht (s) zu hinzuzufügen.layers : Layer -Objekt {Glyphe, PaletteIndex}/{Glyphid, PaletteIndex} oder Array von Ebenenobjekten.position : Position zum Einfügen der Schichten bei (standardmäßig zum Hinzufügen am Ende). Font.layers.ensureCOLR()Hauptsächlich intern verwendet. Stellt sicher, dass die COLR -Tabelle existiert und mit Standardwerten besiedelt ist.
Font.layers.get(glyphIndex)Bekommt die Schichten für eine bestimmte Glyphe
glyphIndex gibt ein Array von {glyph, paletteIndex} -Schichtobjekten zurück. Font.layers.remove(glyphIndex, start, end = start)Entfernt eine oder mehrere Schichten aus einer Glyphe.
glyphIndex : Glyphenindex, um die Schicht (en) aus zu entfernenstart : Index, um die Ebene bei zu entfernenend : (optional) Wenn angegeben, wird alle Ebenen vom Startindex zu (und einschließlich) Endindex entfernt Font.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)Legt die PaletteIndex -Eigenschaft einer Farbglyphenschicht in einen neuen Index fest
glyphIndex : Glyphe in der Schriftart durch einen Glyphenindex auf NullbasislayerIndex : Layer im Glyphen nach Null-basierter SchichtindexpaletteIndex : Neue Farbe, die für die Ebene by Zero-basierter Index in jeder Palette festgelegt werden soll Font.layers.updateColrTable(glyphIndex, layers)Hauptsächlich intern verwendet. Aktualisiert die COLR -Tabelle, füge bei Bedarf einen BaseglypheCord hinzu, um sicherzustellen, dass sie an der richtigen Position eingefügt wird, die Anzahl der Zahlen aktualisiert und die FirstLayerIndex -Werte für alle Basislyphrungen gemäß allen Deletionen oder Einfügen anpassen.
Font.variation ( VariationManager ) Der VariationManager behandelt variable Schrifteigenschaften mithilfe der OpenType -Schriftart -Variationstabellen.
Font.variation.activateDefaultVariation()Aktiviert die Standardvariation, indem sie ihre Variationsdaten als Standard -Renderoptionen der Schriftstelle festlegen. Verwendet die Standardinstanz, falls verfügbar; Andernfalls werden die Koordinaten aller Achsen standardmäßig eingestuft.
Font.variation.getDefaultCoordinates()Gibt die Standardkoordinaten für die Variationsachsen der Schriftart zurück.
Font.variation.getDefaultInstanceIndex() Bestimmt und gibt den Index der Standardvariationsinstanz zurück. Gibt -1 zurück, wenn es nicht bestimmt werden kann.
-1 darstellt. Font.variation.getTransform(glyph, coords) Nur eine Abkürzung für Font.variation.process.getTransform() .
Font.variation.getInstanceIndex(coordinates) Findet den Index der Variationsinstanz, die den bereitgestellten Koordinaten entspricht, oder -1 wenn keine übereinstimmt.
coordinates : Objekt mit Axis -Tags als Schlüssel- und Variationswerte als entsprechende Werte.-1 . Font.variation.getInstance(index)Ruft eine spezifische Variationsinstanz nach seinem Null-basierten Index ab.
index : Null-basierter Index der Variationsinstanz.null wenn der Index ungültig ist. Font.variation.set(instanceIdOrObject)Legt die Variationskoordinaten fest, die standardmäßig für das Rendern der Standard -Renderoptionen der Schriftart verwendet werden sollen.
instanceIdOrObject : entweder der Null-basierte Index einer Variationsinstanz oder ein Objektzuordnungspflicht-Tags zu Variationswerten. Font.variation.get()Ruft die aktuellen Variationseinstellungen aus den Standard -Renderoptionen der Schriftart aus.
Font.variation.process ( VariationProcessor ) Der VariationProcessor ist eine Komponente des VariationManager , die hauptsächlich intern zum Berechnen und Anwenden von Variationen der Glyphen in einer variablen Schriftart verwendet wird. Es behandelt Transformationen und Anpassungen basierend auf den variablen Äxten und Instanzen der Schriftart.
Font.variation.process.getNormalizedCoords(coords)Gibt normalisierte Koordinaten für die Variationsachsen basierend auf den aktuellen Einstellungen zurück.
coords : Das Koordinatungsobjekt zur Normalisierung (oder die Variationskoordnungen in den defaultRenderOptions der Schriftart standardmäßig)Font.variation.process.interpolatePoints(points, deltas, scalar)Interpoliert Punkte basierend auf den bereitgestellten Deltas und einem skalaren Wert.
points : Array der ursprünglichen Punkte.deltas : Array von Point Deltas.scalar : Skalarwert für die Interpolation.Font.variation.process.deltaInterpolate(original, deltaValues, scalar)Berechnet den interpolierten Wert für einen einzelnen angegebenen Originalwerte, Deltas und einen Skalar.
original : Originalwert des Punktes.deltaValues : Array von Delta -Werten für den Punkt.scalar : Skalarwert für die Interpolation.Font.variation.process.deltaShift(points, deltas)Wendet Delta -Werte auf Verschiebungspunkte an.
points : Array der ursprünglichen Punkte.deltas : Array von Deltas zu bewerben.Font.variation.process.transformComponents(components, transformation)Transformiert Komponenten einer Glyphe mit einer bestimmten Transformationsmatrix.
components : Komponenten der Glyph.transformation : Transformationsmatrix zum Anwendung.Font.variation.process.getTransform(glyph, coords)Ruft eine transformierte Kopie eines Glyphs ab, basierend auf den bereitgestellten Variationskoordinaten oder der Glyph selbst, wenn keine Variation angewendet wurde
glyph : Glyphe oder Index der Glyphen zu transformieren.coords : Variationskoordnungsobjekt (oder die Variationskoordnungen in den defaultRenderOptions der Schrift standardmäßig)opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)Berechnet die variable Einstellung für einen bestimmten Einstellungsparameter.
adjustment : Einstellungsparameter.Font.variation.process.getDelta(deltas)Wählt die entsprechenden Delta -Werte aus einer Sammlung von Deltas basierend auf den aktuellen Variationseinstellungen aus.
deltas : Sammlung von Delta -Werten.Font.variation.process.getBlendVector()Berechnet den Mischvektor für Interpolationen basierend auf den aktuellen Einstellungen.
Eine Glyphe ist eine individuelle Marke, die oft einem Charakter entspricht. Einige Glyphen wie Ligaturen sind eine Kombination vieler Charaktere. Glyphen sind die grundlegenden Bausteine einer Schriftart.
font : Ein Verweis auf das Schriftart Objekt.name : Der Glyphename (zB "Aring" , "five" )unicode : Der primäre Unicode -Wert dieser Glyphe (kann undefined werden).unicodes : Die Liste der Unicode -Werte für diesen Glyphen (die meiste Zeit ist dies 1 , kann auch leer sein).index : Die Indexnummer der Glyph.advanceWidth : Die Breite, um den Stift beim Zeichnen dieser Glyphe zu fördern.leftSideBearing : der horizontale Abstand vom vorherigen Zeichen zum Ursprung ( 0, 0 ); Ein negativer Wert zeigt einen Überhang anxMin , yMin , xMax , yMax : Der Begrenzungsbox des Glyphs.path : Der rohe, ungekalkte Pfad der Glyph. Glyph.getPath(x, y, fontSize, options, font)Holen Sie sich ein skaliertes Glyph -Pfadobjekt für die Verwendung in einem Zeichnungskontext.
x : Horizontale Position der Glyph. (Standard: 0 )y : vertikale Position der Basislinie der Glyph. (Standard: 0 )fontSize : Schriftgröße in Pixel (Standard: 72 ).options : {Glyphrenderoptions} , siehe Font.getPath()font : Ein Schriftobjekt, das für die Rendern von Colr/CPAL -Schriftarten benötigt wird, um die Schichten und Farben zu erhalten Glyph.getBoundingBox() Berechnen Sie das minimale Begrenzungsfeld für den nicht skalierten Pfad der angegebenen Glyphe. Gibt ein opentype.BoundingBox -Objekt zurück, das x1 / y1 / x2 / y2 enthält. Wenn der Glyphe keine Punkte hat (z. B. ein Raumschiff), sind alle Koordinaten Null.
Glyph.draw(ctx, x, y, fontSize, options, font)Zeichnen Sie die Glyphe auf den angegebenen Kontext.
ctx : Der Zeichnungskontext.x : Horizontale Position der Glyph. (Standard: 0 )y : vertikale Position der Basislinie der Glyph. (Standard: 0 )fontSize : Schriftgröße in Pixeln (Standard: 72 ).options : {Glyphrenderoptions} , siehe Font.getPath()font : Ein Schriftobjekt, das für die Rendern von Colr/CPAL -Schriftarten benötigt wird, um die Schichten und Farben zu erhalten Glyph.drawPoints(ctx, x, y, fontSize, options, font) Zeichnen Sie die Punkte der Glyphe auf den gegebenen Kontext. Auf den Kurven werden blau gezogen, Off-Kurve-Punkte werden rot gezogen. Die Argumente sind die gleichen wie Glyph.draw() .
Glyph.drawMetrics(ctx, x, y, fontSize) Zeichnen Sie Linien, die wichtige Schriftarten für alle Glyphen im Text anzeigen. Schwarze Linien geben den Ursprung des Koordinatensystems an (Punkt 0,0). Blaue Linien geben den Glyphen -Begrenzungsbox an. Die grüne Linie zeigt die Fortschritt der Glyphe an. Die Argumente sind die gleichen wie Glyph.draw() .
Glyph.toPathData(options) , Glyph.toDOMElement(options) , Glyph.toSVG(options) , Glyph.fromSVG(pathData, options) ,Dies sind derzeit nur Wrapper -Funktionen für ihre Kollegen zu Pfadobjekten (siehe Dokumentation dort), kann jedoch in Zukunft erweitert werden, um Glyph -Daten für die automatische Berechnung weiterzugeben.
Glyph.getLayers(font)Ruft die Farbglyphenschichten für diesen Glyphen aus den Colr/CPAL -Tabellen der angegebenen Schriftart aus
Sobald Sie einen Weg durch Font.getPath() oder Glyph.getPath() haben, können Sie ihn verwenden.
commands : Die Pfadbefehle. Jeder Befehl ist ein Wörterbuch mit einem Typ und Koordinaten. Beispiele finden Sie unten.fill : Die Füllfarbe des Pfades. Farbe ist eine Zeichenfolge, die eine CSS -Farbe darstellt. (Standard: 'black' )stroke : Die Schlaganfallfarbe des Path . Farbe ist eine Zeichenfolge, die eine CSS -Farbe darstellt. (Standard: null ; der Pfad wird nicht gestreichelt)strokeWidth : Die Liniendicke des Path . (Standard: 1 , aber wenn stroke null ist, wird kein Schlaganfall gezeichnet) Path.draw(ctx) Zeichnen Sie den Pfad auf dem gegebenen 2D -Kontext. Damit werden die Eigenschaften des fill , stroke und strokeWidth des Pfadobjekts verwendet.
ctx : Der Zeichnungskontext. Path.getBoundingBox() Berechnen Sie das minimale Begrenzungsfeld für den angegebenen Pfad. Gibt ein opentype.BoundingBox -Objekt zurück, das x1 / y1 / x2 / y2 enthält. Wenn der Pfad leer ist (z. B. ein Weltraumcharakter), sind alle Koordinaten Null.
Path.toPathData(options)Konvertieren Sie den Pfad in eine Reihe von Pfaddatenanweisungen. Siehe https://www.w3.org/tr/svg/paths.html#pathdata
options :decimalPlaces : Die Menge an Dezimalstellen für Gleitpunktwerte. (Standard: 2 )optimize : Wenden Sie einige Optimierungen auf die Pfaddaten an, z. B. um unnötige/doppelte Befehle zu entfernen (True/False, Standard: true )flipY : Ob Sie die y -Achse der Pfaddaten umdrehen sollen, da SVG- und Schriftpfade invertierte Y -Achsen verwenden. ( true : Berechnen Sie aus dem Begrenzungsfeld, false : Deaktivieren; Standard: true )flipYBase : Basiswert für die Basis -Flipping -Berechnung. Sie werden dies wahrscheinlich aus den Ascender- und Abstiegswerten der Schriftart berechnen möchten. (Standardeinstellung: Berechnen Sie automatisch aus dem Begrenzungsfeld der Pfaddaten) Path.toSVG(options) Konvertieren Sie den Pfad als Zeichenfolge in ein SVG <path> -Element.
options : Siehe Path.toPathData() Path.fromSVG(pathData, options)Pfad von SVG -Pfaddaten abrufen.
Entweder überschreiben Sie die Pfaddaten für einen vorhandenen Pfad:
const path = new Path ( ) ;
path . fromSVG ( 'M0 0' ) ;Oder direkt einen neuen Weg erstellen:
const path = Path . fromSVG ( 'M0 0' ) ;pathData : entweder eine Zeichenfolge von SVG -Pfadbefehlen oder (nur im Browserkontext) ein SVGPathElementoptions :decimalPlaces , optimize , flipY , flipYBase : Siehe Path.toPathData()scale : Skalierungswert an alle Befehlskoordinaten angewendet (Standard: 1 )x / y : Offset auf alle Befehlskoordinaten auf der X- oder Y -Achse angewendet (Standard: 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'} Wir verwenden Semver für die Versionierung.
MIT
Wir möchten die Arbeit anderer anerkennen, ohne die OpenType.js nicht möglich wäre:
