Главная » Processing » Работа со шрифтом в Processing

0

В Главе 2, Текст, кривые и фигуры в 2D, мы научились использовать в скетчах различные шрифты. В режиме JAVASCRIPT вы не сможете использовать шрифты .vlw, созданные с помощью инструмента Create Font. Чтобы вывести шрифт в сеть, нужен иной подход. В этом примере вы узнаете все об этом.

Приступим

Для этого примера я взял гарнитуру Chunk. Chunk – это открытый (open source) шрифт от The League of Moveable Type. Вы можете скачать его с их сайта: http://www. theleagueofmoveabletype.com/chunk. Скачайте шрифт и добавьте файл Chunk.ttf в папку вашего скетча, перетащив его в текстовый редактор Processing.

Как это делается

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

PFont font;

float x; float y;

void setup()

{

size( 640, 480 );

font = createFont( "Chunk.ttf", 60 ); textFont( font );

x = 0;

y = height + 60;

}

void draw()

{

background( 255 ); noStroke();

fill( 255, 225, 0 );

rect( x, 0, random( width/2 ), height ); String txt = "This is Chunk!";

float tw = textWidth( txt );

fill( 0 );

text( txt, (width-tw)/2, y );

x += noise( mouseY * 0.02, y * 0.02 ); if ( x >= width ) {

x = 0;

}

y–;

if ( y <= -60 ) {

y = height + 60;

}

}

Когда вы запустите скетч, вы не увидите никаких надписей. А все потому, что мы забыли один важный шаг. Откройте JavaScript | Playback Settings (Directives), для открытия диалагового окна Directives Editor.

Первое поле в этом окне служит для загрузки шрифтов, которые присутствуют в скетче. Нажмите кнопку scan и шрифт Chunk.ttf добавится в это поле. Если вы используете еще несколько шрифтов, они тоже должны быть добавлены, разделенные запятыми. Если кнопка scan не видит вашего шрифта, вы можете добавить его вручную. Когда вы нажме кнопку OK, диалоговое окно Directives Editor будет закрыто и в верхнюю часть скетча будет добавлена следующая строка кода кода:

/* @pjs font="Chunk.ttf"; */

Когда вы запустите скетч, вы увидите, как он отображается в элементе canvas.

Как это работает

В режиме STANDARD скетчи Processing загружают нужные файлы их папки data. Но так как Processing.js запускается в браузере, нам нужно указать, какие файлы для нашего скетча должны быть запрошены с сервера. Именно для этого служит комментарий в первой строке вашего скетча.

/* @pjs font="Chunk.ttf"; */

Этот блок комментариев называется директива. Комбинация @pjs сообщает Processing.js, что в комментариях содержатся команды. font="Chunk.ttf" является командой для Processing.js к загрузке файла Chunk.ttf с веб-сервера, чтобы его можно было применять в скетче.

Дополнительно

С Processing.js вы можете использовать любой шрифт; единственное, что вам нужно знать

- есть ли у вас право использовать его. Именно поэтому в этом примере мы использовали открытый шрифт Chunk. Если вы купили несколько коммерческих шрифтов, возможно, у вас не будет прав для демонстрации его в сети. Вам следует заглянуть в лицензию, которая поставляется со шрифтом именно для этого. Некоторые разработчики прилагают специальные лицензии, по которым вы можете демонстрировать шрифт в сети, но вы должны платить, даже если вы купили его для настольных издательских средств.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии