Использование собственных шрифтов в J2ME

Современные мобильные приложения, как правило, нуждаются в достойном графическом оформлении. Однако самая изысканная графика может быть испорчена неумелым использованием шрифтов. К сожалению, предоставляемые J2ME возможности по работе с фонтами весьма ограничены. Как правило, в вашем распоряжении имеется три системных шрифта, причем Вы имеете лишь приблизительное представление, как они будут выглядеть при работе вашей программы на конкретном телефоне.

Чтобы улучшить внешний вид текста, можно воспользоваться несложными ухищрениями, например создать тень, напечатав два раза один и тот же текст  со сдвигом на 2 единицы. Существуют варианты с использованиемSVG графики, однако он довольно сложен и требует значительного времени на отображение векторных букв, да и полученная в результате картинка не всегда смотрится достаточно хорошо.

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

Итак, приступим. Нашу работу можно разбить на два условных этапа – рисование и программинг.

Рисование

Для особо ленивых выкладываю уже готовый файлс (почти) всеми символами ASCII в нескольких вариациях.
Для создания файла шрифта, нам потребуется Adobe Photoshop любой версии (у меня CS5.5, поэтому скриншоты могут отличаться), если Фотошопа нет, или не охота ставить, можно использовать любой графический редактор, который работает с прозрачностью (Можно и Paint, если нет необходимости в прозрачности). Приступим к работе.

Создаём новый файл размером

• высота - H+2
• длина - H*(k+1),

где H-размер шрифта (в пик.), k-количество необходимых букв, цифр, знаков, которые будут нужны.

Содержимое фона указать - прозрачный

Теперь создаём текст, во всю рабочую область. Вводим необходимые символы (я рекомендую через пробел или два). Шрифт крайне сильно советую «Microsoft Lucia Console» или иной консольный шрифт, иначе намучаетесь с размером букв (например ширина «Т» и «Щ» будет сильно различаться, если возникают проблемы с размером у других шрифтов, можно попытаться создать сетку с равным шагом, и смотреть, чтобы буква не выходила за пределы своей "клетки", где проблемы - добавить пробелы).

Ну а теперь, самое интересное, как сделать обычный шрифт интереснее. Выбираем пункт «Параметры наложения» и щёлкаем, ВСЁ, что душе угодно, только следите, чтобы интервал между буквами присутствовал (У меня это тень и наложение белого цвета или узора).

Вот ещё несколько интересных шрифтов:FontFormated.zip.

Теперь, осталось сохранить нашу красоту, Файл->Сохранить… Выбираем папку, имя и расширение только .png! Теперь шрифт готов, и можно переходить к программингу. Некоторые телефоны могут поддреживать Gif, Jpg, и даже Bmp, но если вы хотите написать универсальное приложение, которое будет без проблем работать на большинстве телефонов - используйте только png.

Программирование

Я для удобства создал отдельную процедуру,

public void Draw_My_Font(String Font, Graphics g, String Stroka, int kx, int ky,
int p, int px, int py) throws IOException{}

Font – путь к нашим нарисованным шрифтам (Напоминаю, *.png)
g – графическая переменная, в которой мы будем рисовать
Stroka – наш текст, который необходимо нарисовать
kx, ky – координаты начала рисования
p – размер расстояния между буквами в файле .png
px – размер расстояния между буквами при рисовании (особенно удобно, брать меньше чем «р», чтобы буквы были плотнее)
py – разница в уровне в предыдущей буквой по оси «у»

Объявление переменных

Image img= Image.createImage(Font);

Наша переменная с изображением

int x=kx,y=ky,idx,X,P=(int) p;

Числовые переменные, необходимые для работы

char smb;

Детектируемый символ

final String Alphavet=
 
"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"
 
+"йцукенгшщзхъфывапролджэячсмитьбюё"
 
+"!«№;%:?*()_+-=@#$^&[]{}|\\/"+
 
+"QWERTYUIOPASDFGHJKLZXCVBNM"+
 
+"qwertyuiopasdfghjklzxcvbnm";

Это всё-переменная алфавит, у каждого своя, просто скопируйте тот текст, из Фотошопа, ОБЯЗАТЕЛЬНО без пробелов между буквами!!!

for(int i=0; i< Stroka.length(); i++){
//Цикл обходит все буквы строки
smb=Stroka.charAt(i);
//Получаем только один символ
idx=Alphavet.indexOf(smb);
//Находим порядковый номер буквы
x=x+px;
y=y+py;
//Вычисляем координаты следующей буквы
if(idx!=-1){
//Проверяем, есть ли буква в списке
X=(int)(idx*p-1);
//вычисляем позицию буквы в алфавите
g.drawImage(Image.createImage(img, X,0, P, img.getHeight(), Sprite.TRANS_NONE),
//Берём из алфавита только одну букву
x, y, Graphics.TOP|Graphics.LEFT);
//и рисуем её
}else{
g.drawString(String.valueOf(smb), x, y,0);
//Или рисуем её системный аналог, если её нет в алфавите
}}}
 

В принципе, большую сложность представляет рисование самих шрифтов, а не код.
Далее идёт пример использования моей программы:

public void paint(Graphics g){
try{
g.setColor(0xffffff);
g.fillRect(0,0,1000,1000);
Draw_My_Font("/hello/Font_all.png",g,"Простая строка",10,10,16.9,10,0);
Draw_My_Font("/hello/Font_all.png",g,"Строка поуже",10,30,16.9,8,0);
Draw_My_Font("/hello/Font_all.png",g,"Строка пошире",10,50,16.9,14,0);
Draw_My_Font("/hello/Font_all.png",g,"Строка идёт вниз",10,70,16.9,10,1);
Draw_My_Font("/hello/Font_all.png",g,"Строка идёт вверх",10,130,16.9,10,-2);
Draw_My_Font("/hello/Font_all.png",g,"Если неправильно подобран р",10,150,16.81,8,0);
} catch(IOException ex){}
}
 

Результат представлен на рисунке

В заключении я выкладываю исходные файлы. Надеюсь моя статья поможет Вам сделать красивые программы с продуманным интерфейсом. Все советы и замечания присылайте мне.

E-mail: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ,
Автор статьи:Тарасов Андрей