Главная » Processing » Работа с изображениями/файлами SVG в Processing

0

В этом примере мы рассмотрим способы отображения изображений и файлов SVG. Вы уже делали это в Главе 2, Текст, кривые и фигуры в 2D, но, как и в примере со шрифтами, здесь нам нужно будет сделать кое-что еще, чтобы все заработало.

Приступим

Перетащите в текстовый редактор Processing изображение и файл SVG, так вы добавите их в папку data вашего скетча Processing.

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

Ниже приведен код нашего скетча. Мы просто загрузим изображение и файл SVG и отобразим их в элементе canvas.

PImage img; PShape shapes;

void setup()

{

size( 640, 480 );

img = loadImage("osaka-fluo.jpg"); shapes = loadShape("shapes.svg");

shapeMode( CENTER );

}

void draw()

{

background( 255 );

image( img, 0, 0 );

translate( width/2, height/2 ); shape( shapes, 0, 0 );

}

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

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

/* @pjs preload="osaka-fluo.jpg"; */

Для загрузки других изображений вы можете добавить их имена файлов в эту директиву, разделив их запятыми.

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

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

/* @pjs preload="image1.jpg,image2.png,image3.png"; font="font1.ttf,font2.ttf";

*/

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

По теме:

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