Форум Flasher.ru - выравнивание иконочных шрифтов

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - выравнивание иконочных шрифтов (http://www.flasher.ru/forum/showthread.php?t=177710)

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

Всем привет,
я использую шрифты с пиктограммами на подобии этого: nodeca.github.com/fontomas/
но при этом возникает проблема выравнивания
http://img-fotki.yandex.ru/get/6004/..._8630ab2e_orig
на рисунке а) изображен символ в текстовом поле и как видно его границы не соотносятся с реальными габаритами символа (что и понятно)
но хочется с ним работать как на рисунке б), чтобы при позиционировании не приходилось гадать
так как иконочные шрифты призваны облегчить жизнь а не наоборот, но хочу посоветоваться с вами
может кто искал решение этой проблемы?

когда я пытаюсь применить простое выравнивание по середине в лоб, получается это:
http://img-fotki.yandex.ru/get/6204/..._f7f40804_orig

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

Код AS3:

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

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

Цитата:

Сообщение от Wolsh (Сообщение 1073451)

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

Код AS3:

<?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 (Сообщение 1073451)

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

Цитата:

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

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

Цитата:

Сообщение от Wolsh (Сообщение 1073451)

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

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

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

Цитата:

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

Цитата:

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

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

Цитата:

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

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

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

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

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

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

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

Цитата:

Сообщение от Wolsh (Сообщение 1073533)

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

Embed с mime type image/svg.

Цитата:

Сообщение от Wolsh (Сообщение 1073562)

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

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

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

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

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