Вручную визуализация SVG-глифов

Question

В настоящее время я реализую простой инструмент визуализации SVG. Я передаю информацию о пути из файла SVG для персонажей, которые мне нужны для рисования.

Это все необходимые сведения для шрифта/символов хранится в 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 библиотеку, мне удалось получить это далеко в процессе рендеринга:

1. Рисование персонажа с использованием информации о пути & SVG.path
2. Применить фиксированную высоту к символу
3. Получить ограничивающий прямоугольник для пути символа
4. Transform системы координат так, Y точки вниз (система в SVG координат шрифтов «вниз»)
5. Draw следующий символ, используя ширину предыдущего символа (ов) в качестве смещения
6. Repeat

Это делает текст. Вы можете увидеть эту работу на этом jsfiddle:

http://jsfiddle.net/dormisher/KVs7E/2/

Дело в том, все на той же высоте, и точно такой же расстоянии друг от друга. Мне нужно знать, как использовать атрибуты horiz-adv-x, unites-per-em и т. Д., Найденные в файле шрифта SVG, чтобы получить правильное горизонтальное и вертикальное позиционирование.

Сначала кажется простым, horiz-adv-x - это просто значение масштабирования, используемое для размера шрифта, поэтому используйте его на горизонтальном смещении и эй престо! Но нет, делать это в конечном итоге с чем-то похожим образом:

http://jsfiddle.net/dormisher/KVs7E/3/

Что мне нужно, чтобы выяснить, как комбинация horizAdvX, а остальные предложения этого типа значений, которые используются для разработки горизонтальных предварительный & вертикальный позиционирование. Я прочитал спецификацию W3C, но для меня это не имеет смысла.

Будьте здоровы, если кто-нибудь может мне помочь!

Answer 1

Фокус в том, чтобы соответствующим образом масштабировать глифы, а затем переместить их в нужное положение. Я только что просмотрел text-morphing extension для svg.js, который также вытаскивает свой глиф из svg-шрифта.

Я пошел так:

var glyphs = 'My Text' 
    , uPerEm = faceElement.getAttribute('units-per-em') 
    , h = fontElement.getAttribute('horiz-adv-x') 
    , x = 0 
    , scale = fontsize/uPerEm 


for(var i = 0, len = glyphs.length; i < len; ++i){ 

    // check if there is kerning for this and the letter before 
    // hkern specifies if the 2 letter move together because of to much space(example: Ya) 
    if(glyphs[i-1]){ 
    hkern = this.source.querySelector('hkern[u1="'+glyphs[i-1]+'"][u2="'+glyphs[i]+'"]') 
    if(hkern){ 
     // substract the value from our current x position 
     x -= parseFloat(hkern.getAttribute('k')) * scale 
    } 
    } 

    // create a new path array with the d-attribute 
    // in cache, all my loaded glyphs are saved 
    var p = new SVG.PathArray(cache[glyphs[i]].d) 
    , box = p.bbox() 

    // scale AND mirror the glyph (note the minus) 
    if(box.height && box.width) 
    p.size(box.width * scale, -box.height * scale) 

    // move the glyph to its position 
    p.move(x,(uPerEm - box.y - box.height)*scale) 

    // draw the path 
    yourSvgRoot.path(p) 

    // add up the horiz-adv-x from the glyph or the horiz-adv-x from the font-node if no horiz-adv-x is present 
    x += parseFloat(cache[glyphs[i]]['horiz-adv-x'] || h) * scale; 

} 

Много кода. Я попытался добавить комментарии, чтобы помочь понять. В основном я просматриваю свои глифы и размер и позиционирую их в соответствии с scalefactor. Я не знаю, что бы сделал flip(), но я уверен, что есть некоторые проблемы с этим. Его лучше рассчитать новые точки пути, которые size() делают для вас автоматически.