test: add glyph path diff

Author: yisibl

examples/basic.js

@@ -2,20 +2,44 @@ const { Buffer } = require('buffer')
 const { readFileSync, writeFileSync } = require('fs')
 const { join } = require('path')
 
+const { convertSVGTextToPath, GlobalFonts } = require('@napi-rs/canvas')
+const { render } = require('@resvg/resvg-js')
+
 const { FontKit } = require('../wasm-node')
 
 const FONT_PATH = join(__dirname, 'OpenSans-Italic.ttf')
+const glyphName = 'B'
 
 const data = readFileSync(FONT_PATH)
 const fontkit = new FontKit()
 const key = fontkit.add_font_from_buffer(data)
 const font = fontkit.query(key)
-const svgPath = font.glyph_path('A').to_string()
-console.info('em-box = ', font.units_per_em)
+const svgPath = font.glyph_path(glyphName).to_string()
+const width = font.units_per_em // embox
+const ascender = font.ascender
+const descender = font.descender
+const height = ascender - descender
+
+console.info('em-box = ', width)
+console.info('ascender = ', ascender)
+console.info('descender = ', descender)
 
-const svg = `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+const svg = `<svg width="500" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <path d="${svgPath}" fill="blue" />
 </svg>
 `
 writeFileSync(join(__dirname, './out.svg'), Buffer.from(svg))
 console.info(svg)
+
+const svgText = `<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <text fill="green" font-family="Open Sans, Open Sans Italic" font-size="900">${glyphName}</text>
+</svg>
+`
+
+GlobalFonts.registerFromPath(FONT_PATH)
+const result = convertSVGTextToPath(svgText)
+console.info('skr-canvas \n', result.toString('utf8'))
+
+const pngData = render(result.toString('utf8'))
+
+writeFileSync(join(__dirname, './foo.png'), pngData)

examples/out.svg

@@ -31,6 +31,7 @@
     "url": "[email protected]:alibaba/font-toolkit.git"
   },
   "devDependencies": {
+    "@napi-rs/canvas": "^0.1.21",
     "@swc-node/register": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",