выравнивание иконочных шрифтов

[v0vka]

Всем привет,
я использую шрифты с пиктограммами на подобии этого: nodeca.github.com/fontomas/
но при этом возникает проблема выравнивания

на рисунке а) изображен символ в текстовом поле и как видно его границы не соотносятся с реальными габаритами символа (что и понятно)
но хочется с ним работать как на рисунке б), чтобы при позиционировании не приходилось гадать
так как иконочные шрифты призваны облегчить жизнь а не наоборот, но хочу посоветоваться с вами
может кто искал решение этой проблемы?

когда я пытаюсь применить простое выравнивание по середине в лоб, получается это:


также я пытался преобразовать их в битмап в надежде что это решит проблему,

icon = new Text("х");
 
			var bitmapData:BitmapData = new BitmapData(32, 32);
			bitmapData.draw(icon);
			var bmp:Bitmap = new Bitmap(bitmapData);
			addChild(bmp);

но результат такой же, битмап получается относительно глифа шрифта а не реальной границы

подскажите как решить проблему?

Добавлено через 2 минуты
я не упомянул тот факт что в исходном состоянии шрифт в формате svg
но как его импортировать во FlashDevelop я не знаю
по этому использую этот же шрифт .otf

[Wolsh]

1) SVG это не шрифт, это векторная графика. Плеер не умеет работать с svg, так что воспользоваться этими картинками можно только перегнав их в шейпы во Flash IDE и сделав экспорт в SWC или SWF.
2) по поводу выравнивания – как будто буквы обычных шрифтов занимают пространство согласно своим визуальным размерам и границам? Есть площадка, а как на ней размещен глиф, это решил дизайнер шрифта.
3) Можно использовать битмап, но не так примитивно. Надо сделать большую битмапдату, отрисовать туда глиф и затем определить ректангл, занимаемый изображением, с помощью getColorBoundsRect(). Затем создать новую битмапдату по размерам этого ректангла и скопировать туда изображение из большой, со смещением естественно, определенным в ректангле.

[v0vka]

Сообщение от Wolsh

1) SVG это не шрифт, это векторная графика. Плеер не умеет работать с svg, так что воспользоваться этими картинками можно только перегнав их в шейпы во Flash IDE и сделав экспорт в SWC или SWF.

То что SVG это Scalable Vector Graphics я знаю, но как не странно fontomas генерирует svg шрифт на выходе.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
  <metadata>This is a custom SVG font generated by Fontomas</metadata>
  <defs>
    <font id="FontomasCustom" horiz-adv-x="500">
      <font-face units-per-em="1000" ascent="750" descent="-250"/>
      <missing-glyph horiz-adv-x="500"/>
<glyph d="M581.235 790.002c55.9854 0 99.9746 -45.9873 99.9746 -99.9736v-779.797c0 -55.9854 -43.9893 -99.9746 -99.9746 -99.9746h-379.901c-53.9854 0 -99.9736 43.9893 -99.9736 99.9746v779.797c0 53.9863 45.9883 99.9736 99.9736 99.9736h379.901zM391.285 -149.753 c39.9893 0 69.9814 21.9941 69.9814 49.9863c0 27.9932 -29.9922 49.9873 -69.9814 49.9873c-37.9902 0 -69.9824 -21.9941 -69.9824 -49.9873c0 -27.9922 31.9922 -49.9863 69.9824 -49.9863zM601.23 0.208008v659.828h-419.891v-659.828h419.891z" unicode="&#x21;"></glyph>
<glyph d="M653.217 80.1865c35.9912 -105.972 -33.9912 -225.94 -155.959 -267.93c-123.968 -37.9902 -247.936 15.9951 -277.928 123.968l-107.973 385.899c-25.9932 89.9766 13.9971 187.951 91.9766 237.938l-95.9756 187.951 c-9.99707 15.9951 -3.99902 37.9902 13.9971 47.9873c15.9951 7.99805 37.9902 1.99902 45.9873 -15.9961l99.9746 -191.95c105.973 27.9932 217.943 -27.9922 253.934 -131.966zM327.302 354.115c35.9902 11.9971 55.9854 51.9873 43.9883 87.9775 c-9.99707 37.9902 -49.9873 57.9854 -85.9775 45.9883s-55.9854 -51.9863 -45.9883 -87.9775c11.9971 -37.9902 51.9863 -57.9844 87.9775 -45.9883z" unicode="&#x22;"></glyph>
<glyph d="M525.25 750.013c11.9971 0 19.9951 -9.99707 19.9951 -19.9951v-859.776c0 -11.9971 -7.99805 -19.9941 -19.9951 -19.9941h-43.9883c-11.9971 0 -19.9951 7.99707 -19.9951 19.9941v439.886h-177.953c-7.99805 0 -17.9961 2 -27.9932 3.99902 c-9.99707 3.99902 -19.9951 7.99805 -25.9932 11.9971l-117.97 81.9785c-7.99805 3.99902 -9.99707 9.99805 -9.99707 15.9961s1.99902 11.9971 9.99707 17.9951l117.97 79.9795c5.99805 5.99805 15.9961 9.99707 25.9932 11.9971 c9.99707 3.99902 19.9951 5.99805 27.9932 5.99805h177.953v189.95c0 9.99805 7.99805 19.9951 19.9951 19.9951h43.9883zM1089.1 542.066c7.99805 -5.99805 11.9971 -11.9961 11.9971 -17.9951c0 -5.99805 -3.99902 -11.9971 -11.9971 -15.9951l-117.969 -81.9795 c-5.99902 -3.99902 -15.9961 -7.99707 -25.9941 -11.9961c-9.99707 -2 -19.9941 -3.99902 -27.9922 -3.99902h-301.922l-39.9893 229.939h341.911c7.99805 0 17.9951 -1.99902 27.9922 -5.99805c9.99805 -2 19.9951 -5.99805 25.9941 -11.9971z" unicode="&#x23;"></glyph>
<glyph d="M131.353 536.068c-23.9941 11.9971 -45.9883 53.9863 -1.99902 53.9863h845.779c43.9893 0 21.9951 -41.9893 -1.99902 -53.9863c-25.9932 -13.9961 -363.905 -195.949 -375.902 -201.947c-11.9971 -5.99902 -27.9932 -9.99805 -43.9883 -9.99805 c-17.9951 0 -33.9912 3.99902 -45.9883 9.99805c-11.9971 5.99805 -349.909 187.951 -375.902 201.947zM983.131 436.095c19.9951 9.99707 19.9951 -2 19.9951 -11.9971v-365.905c0 -21.9941 -27.9932 -47.9873 -49.9873 -47.9873h-801.791 c-21.9941 0 -47.9883 25.9932 -47.9883 47.9873v365.905c0 9.99707 -1.99902 21.9941 17.9961 11.9971c27.9922 -15.9961 367.904 -193.95 385.899 -201.948c15.9961 -7.99707 27.9932 -9.99707 45.9883 -9.99707c15.9951 0 27.9922 2 43.9883 9.99707 c17.9951 7.99805 357.907 185.952 385.899 201.948z" unicode="&#x24;"></glyph>
<glyph d="M819.174 628.045c71.9814 -71.9814 61.9834 -125.968 61.9834 -125.968l-251.935 -251.935l-289.924 -289.925l-237.938 -49.9863l49.9873 237.938l289.925 287.926l251.935 253.934s53.9854 9.99707 125.967 -61.9834zM325.302 -9.79004l23.9941 21.9951 s-1.99902 43.9883 -49.9873 93.9746c-49.9863 49.9873 -95.9746 51.9873 -95.9746 51.9873l-21.9941 -23.9941l-17.9951 -81.9785c13.9961 -7.99805 29.9922 -15.9961 45.9873 -33.9912c17.9951 -17.9951 27.9932 -31.9922 35.9912 -45.9883z" unicode="&#x25;"></glyph></font>
  </defs>
</svg>

Но, так как svg не может быть отрендерен flash player я воспользовался otf аналогом этого шрифта, я указал это в сообщении.

Сообщение от Wolsh

2) по поводу выравнивания – как будто буквы обычных шрифтов занимают пространство согласно своим визуальным размерам и границам? Есть площадка, а как на ней размещен глиф, это решил дизайнер шрифта.

Сообщение от v0vka

и как видно его границы не соотносятся с реальными габаритами символа (что и понятно)

Сообщение от Wolsh

3) Можно использовать битмап, но не так примитивно. Надо сделать большую битмапдату, отрисовать туда глиф и затем определить ректангл, занимаемый изображением, с помощью getColorBoundsRect(). Затем создать новую битмапдату по размерам этого ректангла и скопировать туда изображение из большой, со смещением естественно, определенным в ректангле.

ваше решение примитивно и тривиально, о нем я подумал сразу

мой вопрос состоял в том, чтобы поинтересоваться нет ли каких нибудь отточенных reuseble решений
(библиотек каких и т.д.)

[Wolsh]

также я пытался преобразовать их в битмап в надежде что это решит проблему, но результат такой же, битмап получается относительно глифа шрифта а не реальной границы
подскажите как решить проблему?

ваше решение примитивно и тривиально, о нем я подумал сразу

Но оно решает проблему. Прежде чем злопыхать, стоило попробовать, а не приводить здесь заведомо бесполезный код.

мой вопрос состоял в том, чтобы поинтересоваться нет ли каких нибудь отточенных reuseble решений
(библиотек каких и т.д.)

Я привел Вам отточенное решение с импортом svg во Flash IDE и экспортом оттуда в swc, который можно спокойно использовать в FD. Но уже не как шрифт svg (технология кастомных шрифтов в CSS3/HTML5/Canvas), а как набор векторных шейпов или спрайтов. О каких библиотеках речь? Даже если бы существовала библиотека для аккуратного преобразования подключенного в компайл-тайме или загруженного в рантайме svg в шрифт внутреннего формата плеера, результат бы не отличался от варианта с otf, который Вас не устраивает.
Если кто-то знает плагин к ФД, преобразующий svg в шейп или комплект шейпов с генерацией классов, то мне это тоже будет интересно. Наверное.

[v0vka]

Wolsh, видимо мы друг друга до конца не поняли
но не суть

походу придется использовать как обычный шейп
но смысл тогда от символьного шрифта теряется

[Wolsh]

И да, если Вас не устраивает битмап и хочется использовать возможности вектора, то можно применить битмап только для определения смещения контура глифа на площадке, и дальше выравнивать текстфилд основываясь на полученном ректангле.

Добавлено через 7 минут
Но тогда будут неприятности с размерами блока, в котором лежит текстфилд – ведь текстфилд будет вылазить за границы. Я бы юзал битмап и не парился. getColorBoundsRect() не самая конечно быстрая операция, но уж точно не сравнится с парсингом svg и созданием векторного контура, если Вы найдете такое решение.

[Wolsh]

Вот пример с "обрезкой" битмапы. ФД.

[alatar]

Сообщение от Wolsh

Если кто-то знает плагин к ФД, преобразующий svg в шейп или комплект шейпов с генерацией классов, то мне это тоже будет интересно. Наверное.

Embed с mime type image/svg.

[v0vka]

Сообщение от Wolsh

Вот пример с "обрезкой" битмапы. ФД.

Wolsh, посмотрел пример. Большое спасибо за ответ
не думал что кто-то сможет написать код

вышел из ситуации практически таким-же способом
сейчас тестирую насколько упадет скорость начальной загрузки приложения

Добавлено через 18 минут
профайлер показал что на скорость это практически не влияет вообще

[Wolsh]

alatar, отлично!))
Выходит, до сих пор не пригодилось, и уже стало deprecated в пользу FXG.