Робота зі шрифтом в Processing

У Главі 2, Текст, криві і фігури в 2D, Ми навчилися використовувати в скетчах різні шрифти У режимі JAVASCRIPT ви не зможете використовувати шрифти Vlw, створені за допомогою інструменту Create Font Щоб вивести шрифт в мережу, потрібен інший підхід У цьому прикладі ви дізнаєтеся все про це

Приступимо

Для цього прикладу я взяв гарнітуру Chunk Chunk – це відкритий (open source) шрифт від The ​​League of Moveable Type Ви можете завантажити його з їх сайту: http://www theleagueofmoveabletypecom / chunk Скачайте шрифт і додайте файл Chunkttf в папку вашого скетчу, перетягнувши його в текстовий редактор Processing

Як це робиться

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

PFont font

float x float y

void setup()

{

size( 640, 480 )

font = createFont( &quotChunkttf&quot, 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 = &quotThis is Chunk"

float tw = textWidth( txt )

fill( 0 )

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

x += noise( mouseY * 002, y * 002 ) if ( x &gt= width ) {

x = 0

}

y–

if ( y &lt= -60 ) {

y = height + 60

}

}

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

Перше поле в цьому вікні служить для завантаження шрифтів, які присутні в скетчі Натисніть кнопку scan і шрифт Chunkttf додасться в це поле Якщо ви використовуєте ще кілька шрифтів, вони теж повинні бути додані, розділені комами Якщо кнопка scan не бачить вашого шрифту, ви можете додати його вручну Коли ви натисніть кнопку OK, Діалогове вікно Directives Editor буде закрито і у верхню частину скетчу буде додана наступна рядок коду коду:

/* @pjs font=&quotChunkttf" */

Коли ви запустите скетч, ви побачите, як він відображається в елементі canvas

Як це працює

У режимі STANDARD скетчі Processing завантажують потрібні файли їх папки data Але так як Processingjs запускається в браузері, нам потрібно вказати, які файли для нашого скетчу повинні бути запитані з сервера Саме для цього служить коментар в першому рядку вашого скетчу

/* @pjs font=&quotChunkttf" */

Цей блок коментарів називається директива Комбінація @ pjs повідомляє Processingjs, що в коментарях містяться команди font = Chunkttf є командою для Processingjs до завантаження файлу Chunkttf з веб-сервера, щоб його можна було застосовувати в скетчі

Додатково

З Processingjs ви можете використовувати будь-який шрифт єдине, що вам потрібно знати

– Чи є у вас право використовувати його Саме тому в цьому прикладі ми використовували відкритий шрифт Chunk Якщо ви купили кілька комерційних шрифтів, можливо, у вас не буде прав для демонстрації його в мережі Вам слід заглянути в ліцензію, яка поставляється зі шрифтом саме для цього Деякі розробники докладають спеціальні ліцензії, за якими ви можете демонструвати шрифт в мережі, але ви повинні платити, навіть якщо ви купили його для настільних видавничих засобів

Джерело: Ян Вантомм, Processing 2: креативне програмування, переклад з англійської Олександри Мішутіної, Published by Packt Publishing Ltd, 2012, BIRMINGHAM – MUMBAI

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*