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.git 복제하십시오cd opentype.js 로 이동하십시오npm install 로 필요한 종속성을 설치하십시오npm run build 사용하십시오.npm run start 사용하고 /docs 폴더로 이동하십시오.npm 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 압축은 WOFF 전임자보다 29% 더 잘 수행합니다. 그러나이 압축은 또한 더 복잡하며 훨씬 무겁고 (> 10 ×!) opentype.js 라이브러리 (≈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 : 글리프 객체의 색인 목록.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" , 6/8 자리 헥스 색상의 경우 "hex" / "hexa" 또는 hsl() / hsla() 출력의 경우 "hsl" / "hsla" 일 수 있습니다. "bgra" r, g, b, 키 (0-255의 r/g/b, a에서 0-1)의 객체를 출력합니다. "raw" CPAL 테이블에 사용 된 정수를 출력합니다.fill : 글꼴 색상, 각 글리프를 렌더링하는 데 사용되는 색상 (기본값 : "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). 파란색 선은 글리프 경계 박스를 나타냅니다. 녹색 선은 글리프의 전진 너비를 나타냅니다.
Font.stringToGlyphs(string)문자열을 글리프 객체 목록으로 변환하십시오. 인대와 같은 가능한 치환으로 인해 문자열과 글리프 목록 사이에 엄격한 1 대 1 서신이 없습니다. 반환 된 글리프 목록은 주어진 문자열의 길이보다 크거나 작을 수 있습니다.
Font.charToGlyph(char) 문자를 글리프 객체로 변환하십시오. 글리프를 찾을 수없는 경우 null 반환합니다. 이 기능은 주어진 문자와 글리프 사이에 일대일 매핑이 있다고 가정합니다. 복잡한 스크립트의 경우 그렇지 않을 수 있습니다.
Font.getKerningValue(leftGlyph, rightGlyph) 왼쪽 글리프 (또는 그 지수)와 오른쪽 글리프 (또는 그 지수) 사이의 커닝 쌍의 값을 검색하십시오. 커닝 쌍이 발견되지 않으면 0 반환하십시오. 글리프 사이의 간격을 계산할 때 커닝 값이 전진 너비에 추가됩니다.
Font.getAdvanceWidth(text, fontSize, options)텍스트의 사전 너비를 반환합니다.
이것은 Path.getBoundingBox() 와 다른 것입니다. 예를 들어 접미사가있는 공백은 Advancewidth를 증가 시키지만 서예 'f'와 같은 경계 상자 나 돌출 된 문자는 Advance Width보다 상당히 큰 경계 상자를 가질 수 있습니다.
이것은 canvas2dContext.measureText(text).width 에 해당합니다
fontSize : 픽셀로 텍스트의 크기 (기본값 : 72 ).options : {glyphrenderoptions} , Font.getPath() 참조하십시오. Font.palettes 객체 ( PaletteManager )이를 통해 테이블을 수동으로 수정하지 않고도 CPAL 테이블의 팔레트와 색상을 관리 할 수 있습니다.
Font.palettes.add(colors)새 팔레트를 추가하십시오.
colors : (선택 사항) 팔레트에 추가 할 색상, 기존 팔레트의 차이는 기본값으로 채워집니다. Font.palettes.delete(paletteIndex)0 기반 인덱스로 팔레트를 삭제합니다
paletteIndex : 제로 기반 팔레트 인덱스 Font.palettes.deleteColor(colorIndex, replacementIndex)모든 팔레트에서 특정 색상 색인을 삭제하고 현재 교체 인덱스에있는 색상을 사용하여 해당 색상을 사용하여 모든 레이어를 업데이트합니다.
colorIndex : 삭제해야 할 색상 색인replacementIndex : 삭제할 색상을 사용하여 레이어를 교체 할 색상의 색인 (삭제 전 팔레트에 따라) Font.palettes.cpal()글꼴의 CPAL 테이블을 반환하거나 존재하지 않으면 False를 반환합니다. 내부적으로 사용됩니다.
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 : {glyphrenderoptions} 의 colorFormat 출력으로 지원되는 형식으로 팔레트를 채우는 색상 값의 배열은 Font.getPath() 참조하십시오. CSS 색상 이름은 브라우저 컨텍스트에서도 지원됩니다.colorCount : 팔레트를 채우는 색상 수, 기본값은 Numpaletteentries 필드의 값에 대한 기본값 Font.palettes.getAll(colorFormat)각 팔레트에 대한 색상 값 배열을 선택적으로 지정된 색상 형식으로 반환합니다.
colorFormat : (선택 사항) Font.getPath() , (기본값 : "hexa" )의 {glyphrenderoptions} 참조 Font.palettes.getColor(index, paletteIndex, colorFormat)제로 기반 색인으로 특정 팔레트를 얻으십시오
index : 팔레트의 색상의 제로 기반 색인paletteIndex : 제로 기반 팔레트 색인 (기본값 : 0)colorFormat : (선택 사항) Font.getPath() , (기본값 : "hexa" )의 {glyphrenderoptions} 참조 Font.palettes.get(paletteIndex, colorFormat)제로 기반 색인으로 특정 팔레트를 얻으십시오
paletteIndex : 제로 기반 팔레트 인덱스colorFormat : (선택 사항) Font.getPath() , (기본값 : "hexa" )의 {glyphrenderoptions} 참조 Font.palettes.setColor(index, colors, paletteIndex)0 기반 인덱스로 특정 팔레트에 하나 이상의 색상을 설정
index : 채우기 시작하는 Zero 기반 색 인덱스color : {glyphrenderoptions} 에서 colorFormat 의 출력으로 지원되는 색상 표기법의 색상 값 또는 색상 값 배열, Font.getPath() 참조하십시오. CSS 색상 이름은 브라우저 컨텍스트에서도 지원됩니다.paletteIndex : 제로 기반 팔레트 색인 (기본값 : 0) Font.palettes.toCPALcolor(color)색상 값 문자열을 CPAL 정수 값으로 변환합니다.
color : {glyphrenderoptions} 에서 colorFormat 의 출력으로 지원되는 색상 표기법의 문자열은 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)컬러 글리프 레이어의 PaletteIndex 속성을 새로운 색인으로 설정합니다.
glyphIndex : Zero-Based Glyph Index의 글꼴의 글리프layerIndex : 제로 기반 레이어 인덱스에 의한 글리프의 레이어paletteIndex : 모든 팔레트에서 0 기반 인덱스로 레이어를 설정하는 새로운 색상 Font.layers.updateColrTable(glyphIndex, layers)주로 내부적으로 사용됩니다. COLR 테이블을 업데이트하고 필요한 경우 BaseGlyPhrecord를 추가하여 올바른 위치에 삽입되고, NumLayers를 업데이트하고, 삭제 또는 삽입에 따라 모든 BaseGlyPhrecord에 대한 FirstLayerIndex 값을 조정하는지 확인합니다.
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)0 기반 인덱스로 특정 변형 인스턴스를 검색합니다.
index : 변형 인스턴스의 제로 기반 인덱스.null . Font.variation.set(instanceIdOrObject)글꼴의 기본 렌더링 옵션의 렌더링을 위해 기본적으로 사용할 변형 좌표를 설정합니다.
instanceIdOrObject : 변형 인스턴스의 0 기반 인덱스 또는 변형 값에 대한 객체 매핑 축 태그. 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 : 포인트 델타 배열.scalar : 보간을위한 스칼라 값.Font.variation.process.deltaInterpolate(original, deltaValues, scalar)원래 값, 델타 및 스칼라가 주어진 단일 지점에 대해 보간 된 값을 계산합니다.
original : 요점의 원래 가치.deltaValues : 포인트의 델타 값 배열.scalar : 보간을위한 스칼라 값.Font.variation.process.deltaShift(points, deltas)델타 값을 시프트 포인트에 적용합니다.
points : 원래 포인트 배열.deltas : 적용 할 델타 배열.Font.variation.process.transformComponents(components, transformation)지정된 변환 행렬을 사용하여 글리프의 구성 요소를 변환합니다.
components : 글리프의 구성 요소.transformation : 적용 할 변환 매트릭스.Font.variation.process.getTransform(glyph, coords)제공된 변형 좌표에 따라 글리프의 변환 된 사본 또는 변형이 적용되지 않은 경우 글리프 자체를 검색합니다.
glyph : 글리프 또는 글리프의 변형.coords : Variation Coords 객체 (또는 기본적으로 글꼴의 defaultRenderOptions 의 변형 코디opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)주어진 조정 매개 변수에 대한 변수 조정을 계산합니다.
adjustment : 조정 매개 변수.Font.variation.process.getDelta(deltas)현재 변형 설정을 기반으로 델타 컬렉션에서 적절한 델타 값을 선택합니다.
deltas : 델타 값 수집.Font.variation.process.getBlendVector()현재 설정에 따라 보간을 위해 블렌드 벡터를 계산합니다.
글리프는 종종 캐릭터에 해당하는 개별 마크입니다. 인대와 같은 일부 글리프는 많은 문자의 조합입니다. 글리프는 글꼴의 기본 빌딩 블록입니다.
font : 글꼴 대상에 대한 참조.name : 글리프 이름 (예 : "Aring" , "five" )unicode :이 글리프의 1 차 유니 코드 값 ( undefined ).unicodes :이 글리프의 유니 코드 값 목록 (대부분은 1 이면 비어있을 수 있음).index : 글리프의 색인 번호.advanceWidth :이 글리프를 그릴 때 펜을 전진시키는 너비.leftSideBearing : 이전 문자에서 원점까지의 수평 거리 ( 0, 0 ); 음수 값은 돌출부를 나타냅니다xMin , yMin , xMax , yMax : 글리프의 경계 상자.path : 글리프의 생생하고 척도가없는 경로. Glyph.getPath(x, y, fontSize, options, font)드로잉 컨텍스트에서 사용하기 위해 스케일링 된 글리프 경로 객체를 가져옵니다.
x : 글리프의 수평 위치. (기본값 : 0 )y : 글리프의 기준선 의 수직 위치. (기본값 : 0 )fontSize : 픽셀의 글꼴 크기 (기본값 : 72 ).options : {glyphrenderoptions} , Font.getPath() 참조하십시오.font : 콜로그/CPAL 글꼴을 렌더링하는 데 필요한 글꼴 객체, 레이어와 색상을 얻습니다. Glyph.getBoundingBox() 주어진 글리프의 비 송금 경로에 대한 최소 경계 상자를 계산하십시오. x1 / y1 / x2 / y2 를 포함하는 opentype.BoundingBox 객체를 반환합니다. 글리프에 포인트가 없으면 (예 : 공간 문자), 모든 좌표는 0이됩니다.
Glyph.draw(ctx, x, y, fontSize, options, font)주어진 컨텍스트에 글리프를 그립니다.
ctx : 드로잉 컨텍스트.x : 글리프의 수평 위치. (기본값 : 0 )y : 글리프의 기준선 의 수직 위치. (기본값 : 0 )fontSize : 글꼴 크기, 픽셀 (기본값 : 72 ).options : {glyphrenderoptions} , Font.getPath() 참조하십시오.font : 콜로그/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 데이터를 전달하기 위해 연장 될 수 있습니다.
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() 주어진 경로의 최소 경계 상자를 계산하십시오. x1 / y1 / x2 / y2 를 포함하는 opentype.BoundingBox 객체를 반환합니다. 경로가 비어 있으면 (예 : 공간 문자), 모든 좌표는 0이됩니다.
Path.toPathData(options)경로를 일련의 경로 데이터 지침으로 변환하십시오. https://www.w3.org/tr/svg/paths.html#pathdata를 참조하십시오
options :decimalPlaces : 부동 소수점 값을위한 소수점 자리의 양. (기본값 : 2 )optimize : 경로 데이터에 일부 최적화를 적용하고 예를 들어 불필요/중복 명령을 제거합니다 (true/false, default : true )flipY : SVG 및 FONT 경로는 반전 된 y 축을 사용하기 때문에 경로 데이터의 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 : 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를 사용합니다.
MIT
OpenType.js가 불가능한 다른 사람의 작업을 인정하고 싶습니다.
