我目前正在实现一个简单的SVG文本渲染器。我从SVG文件中提取出所需绘制字符的路径信息。
以下是存储字体/字符所有相关信息的JSON对象:
使用出色的svg.js库,我已经成功地完成了渲染过程的以下步骤:
如果有人能帮助我解决这个问题,那就太好了!
以下是存储字体/字符所有相关信息的JSON对象:
window.font = {
horizAdvX: 487,
unitsPerEm: 2048,
ascent: 1638,
descent: -410,
glyphs: {
H: {
horizAdvX: 1382,
path: 'M147 14q64 133 244 604q-68 29 -90 80q19 14 135 37l27 66q85 217 115 327.5t81 391.5q81 -14 153 -73t126 -147q-8 -11 -17.5 -26t-22 -38.5t-23 -43.5t-27 -55.5t-27 -58.5l-31.5 -69t-32 -71t-35.5 -80.5t-36.5 -81.5q282 39 488 51q77 223 157.5 399.5t136.5 235.5 q42 -3 124.5 -47.5t101.5 -79.5q-69 -65 -143 -210.5t-140 -336.5q41 -38 41 -92q0 -39 -16 -71q-28 4 -76 8q-69 -219 -111.5 -425t-42.5 -319q0 -33 4 -53q-41 2 -65 15t-31 28.5t-18 32t-27 22.5q-26 9 -44.5 74.5t-18.5 110.5q0 160 104 510q-75 -5 -255 -24.5 t-253 -20.5q-166 -392 -231 -750q-73 18 -126 62.5t-98 117.5z'
},
u: {
horizAdvX: 1011,
path: 'M174 119q0 98 16 174q43 181 146 386.5t221 291.5q44 0 99 -16t83 -48q-18 -19 -51 -68t-93 -161t-116 -244q-24 -55 -55 -162.5t-31 -156.5q0 -22 15 -37q29 11 73.5 62.5t134.5 174.5q6 9 36 49t47 64t42.5 63t44 75.5t31.5 70.5q19 51 33 84.5t49.5 91.5t77.5 98 q53 0 114 -20.5t80 -44.5q-28 -68 -104.5 -220.5t-115 -259.5t-38.5 -204q0 -51 11.5 -92t22.5 -64.5t11 -32.5q0 -3 -2 -5t-4 -2l-2 -1q-28 0 -88 24t-106 56q-35 29 -50.5 76t-15.5 90q0 44 10 74q-10 1 -52.5 -51t-95.5 -123t-67 -88q-57 -61 -88 -64q-70 3 -138.5 47.5 t-84.5 112.5z'
},
// rest of chars ...
使用出色的svg.js库,我已经成功地完成了渲染过程的以下步骤:
- 使用路径信息和
SVG.path
方法绘制字符 - 为字符应用固定高度
- 获取字符路径的边界框
- 将坐标系转换为y向下(SVG字体中的坐标系是“上下颠倒”的)
- 使用前一个字符的宽度作为偏移量来绘制下一个字符
- 重复上述步骤
http://jsfiddle.net/dormisher/KVs7E/2/
事实上,所有东西的高度都是相同的,而且距离也完全相同。我需要知道如何使用SVG字体文件中的属性horiz-adv-x
,unites-per-em
等来获得正确的水平和垂直定位。起初看起来很简单,horiz-adv-x
只是一个在字体大小上使用的缩放值,因此在水平偏移上使用它即可!但是,这样做会导致出现以下情况:
http://jsfiddle.net/dormisher/KVs7E/3/
我需要弄清楚的是,horizAdvX和其他类似值的组合如何用于计算水平推进和垂直定位。我已经阅读了W3C规范,但对于这方面的内容来说,它并没有太多意义。如果有人能帮助我解决这个问题,那就太好了!