Робота із зображеннями


Зображення (змінна img), яке використовуватиметься в проекті, потрібно оголосити командою, у якій одразу ж вказати значення для цієї змінної (файл із зображенням на диску)

PImage img =loadImage("pic.jpg");


Файл із зображенням pic.jpg має розташовуватись у каталозі data поточного проекту Processing.

Підключити файл до проекту можна через меню Ескіз - Додати файл (Sketch - Add File).


Для того, щоб зобразити оголошену картинку на полотні проекту, потрібна команда

image(img,0,0,640,480);

де img - це назва змінної, що містить завантажене зображення, 0,0 - координати її положення на полотні, 640,480 - розміри зображення на полотні (їх можна не вказувати, тоді використовуватимуться справжні розміри зображення).


Приклад:

// Створюємо змінну для зберігання зображення

PImage img;

void setup()

{

// завантажуємо зображення з файлу (файл повинен бути в каталозі data

img= loadImage("movie44.jpg");

  // налаштовуємо розміри полотна проекту

  size(420, 280);

}

void draw()

{

// показ зображення на екрані

image(img,30,0,100,10);

}


Бачимо, що зображення розташоване із відступом 30 пікселів вправо від кута полотна. Розміри зображення змінено (його початкові розміри були 420х280), без збереження пропорцій.

Дотриматись пропорційної зміни розмірів можна, використавши такий прийом:

int prop=100;

int imgHeight=prop*img.height/img.width;

image(img,30,0,prop,imgHeight);


Зверніть увагу на крапковий синтаксис мови: до властивостей об'єкта (зображення) можна звернутись, вказавши цю властивість через крапку після назви об'єкта (img.height, img.width).

Продемонструємо використання команди imageMode, яка визначає, як саме відраховуються координати відображення картинки на полотні. Для цього відобразимо картинку не у конкретних координатах (0,30), як у попередньому прикладі, а за координатами вказівника миші. За умовчанням ці координати позначають лівий верхній кут картинки.

image(img,mouseX,mouseY,prop,imgHeight);

Проте, використавши команду imageMode(CENTER); до вказівника миші буде прив'язано центр зображення.


Переключення до кутового варіанту задавання координат виконує команда imageMode(CORNER);


Деякі шаблони розміщення зображень:

Одне зображення по центру:

imageMode(CENTER);

int margin=10;

int imgHeight=prop*img.height/img.width;

image(img,width/2,margin+imgHeight/2,prop,imgHeight);


Два зображення симетрично по центру:

image(img,width/2-margin-prop/2, height/2+margin+imgHeight/2,prop,imgHeight);

image(img,width/2+margin+prop/2, height/2+margin+imgHeight/2,prop,imgHeight);

Остання зміна: четвер 2 квітня 2020 9:10