Objects
jscad-text :object
Create Outlines of Text using TTF fonts
The JSCAD project does not provide the ability to use TTF fonts when creating outlines of text (It only supports SIMPLEX fonts.) Therefore, a special set of functionality has been created to suppliment JSCAD.
Constants
loadFont ⇒Font
Load the font description from the given file path.
loadFontFromData ⇒Font
Load the font description from the given data.
loadGoogleFont ⇒Font
Load the font from the Google Fonts website, using the given family and variant.
This function is asycronous, and fetchs the data via the given fetch function. This is required due to the fetching of data across the internet via HTTP protocols.
loadWebFont ⇒Font
Load the font from a website using the given URL.
This function is asycronous, and fetchs the data via the given fetch function. This is required due to the fetching of data across the internet via HTTP protocols.
textToGeom2 ⇒Object
Convert the given text to a geom2 object.
The paths are created based on the original Font glyphs, and scaled to the fontSize.
textToPaths ⇒Array
Convert the given text to a set of outline paths.
The paths are created based on the original Font glyphs, and scaled to the fontSize.
The paths may or may not be closed. See textToGeom2 for additional options.
jscad-text : object
Create Outlines of Text using TTF fonts
The JSCAD project does not provide the ability to use TTF fonts when creating outlines of text (It only supports SIMPLEX fonts.) Therefore, a special set of functionality has been created to suppliment JSCAD.
Kind: global namespace
License: MIT
loadFont ⇒ Font
Load the font description from the given file path.
Kind: global constant
Returns: Font - new font object which contains the contents of the font
| Param | Type | Description |
|---|---|---|
| path | String |
path to local file, i.e. font |
Example
const filePath = "./fonts/Habana.ttf"
const font = loadFont(filePath)loadFontFromData ⇒ Font
Load the font description from the given data.
Kind: global constant
Returns: Font - new font object which contains the contents of the font
| Param | Type | Description |
|---|---|---|
| data | ArrayBuffer |
raw data from font file |
Example
const fontData = await response.arrayBuffer()
const font = loadFontFromData(fontData)loadGoogleFont ⇒ Font
Load the font from the Google Fonts website, using the given family and variant.
This function is asycronous, and fetchs the data via the given fetch function. This is required due to the fetching of data across the internet via HTTP protocols.
Kind: global constant
Returns: Font - new font object which contains the contents of the font
See: https://developers.google.com/fonts/
NOTE: See the console output for hints about available variants.
| Param | Type | Description |
|---|---|---|
| family | String |
family name of font to load |
| variant | String |
variant name of font to load |
| fetch | function |
function to use for fetching the font from Google |
Example
// see the examples for additional information
const font = await loadGoogleFont(family, variant, fetchFunc)loadWebFont ⇒ Font
Load the font from a website using the given URL.
This function is asycronous, and fetchs the data via the given fetch function. This is required due to the fetching of data across the internet via HTTP protocols.
Kind: global constant
Returns: Font - new font object which contains the contents of the font
| Param | Type | Description |
|---|---|---|
| fontUrl | String |
URL of font file to load |
| fetch | function |
function to use for fetching the font from Google |
Example
// see the examples for additional information
const fontUrl = "http://72.62.112.88/v3/docs/fonts/Montserrat/Montserrat-Regular.ttf"
const font = await loadWebFont(fontUrl, fetchFunc)textToGeom2 ⇒ Object
Convert the given text to a geom2 object.
The paths are created based on the original Font glyphs, and scaled to the fontSize.
Kind: global constant
Returns: Object - A geom2 object
See: Font.getPath() at https://github.com/opentypejs/opentype.js#fontgetpathtext-x-y-fontsize-options
| Param | Type | Default | Description |
|---|---|---|---|
| options | Object |
options for the conversion | |
| options.font | Font |
the font representing a loaded OpenType font file | |
| [options.fontSize] | Number |
72 |
size of the text in pixels |
| [options.fontOptions] | Object |
{} |
options passed through to Font.getPath(), e.g. kerning, features (liga, rlig, etc.), hinting. The opentype.js defaults apply. See https://github.com/opentypejs/opentype.js#fontgetpathtext-x-y-fontsize-options |
| [options.segments] | Number |
32 |
number of segments to create per full rotation |
| [options.center] | Array |
[true, true] |
centering options for the X and Y axes; true, false, or the center coordinate in mm. Y centering is based on the font cap height. |
| text | String |
text of which to convert to geom2 |
Example
const font = await loadWebFont(fontFileUrl, fetchFunc)
let paths = textToGeom2({font, fontSize: 96, segments: 72}, 'JSCAD is awesome!!!')textToPaths ⇒ Array
Convert the given text to a set of outline paths.
The paths are created based on the original Font glyphs, and scaled to the fontSize.
The paths may or may not be closed. See textToGeom2 for additional options.
Kind: global constant
Returns: Array - list of outline paths, i.e. Path2
See: Font.getPath() at https://github.com/opentypejs/opentype.js#fontgetpathtext-x-y-fontsize-options
| Param | Type | Default | Description |
|---|---|---|---|
| options | Object |
options for the conversion | |
| options.font | Font |
the font representing a loaded OpenType font file | |
| [options.fontSize] | Number |
72 |
size of the text in pixels |
| [options.fontOptions] | Object |
{} |
options passed through to Font.getPath(), e.g. kerning, features (liga, rlig, etc.), hinting. The opentype.js defaults apply. See https://github.com/opentypejs/opentype.js#fontgetpathtext-x-y-fontsize-options Note: hinting is only needed for rasterization from vector data; it should not be needed for vector output such as JSCAD paths. |
| [options.center] | Array |
[false, false] |
centering options for the X and Y axes; true, false, or the center coordinate in mm. Y centering is based on the font cap height. |
| [options.segments] | Number |
32 |
number of segments to create per full rotation |
| [options.forceClose] | Boolean |
false |
force closure of paths, as some fonts do not |
| text | String |
text of which to convert to outlines |
Example
const font = await loadWebFont(fontFileUrl, fetchFunc)
let paths = textToPaths({font, fontSize: 96, segments: 72}, 'JSCAD is awesome!!!')