Работаем с файлами SVG

Processing поддерживает файлы SVG, которые можно создавать в векторных редакторах (Adobe Illustrator, Inkscape и др.). Не все возможности SVG доступны, поэтому следует быть осторожным.

Сохраните svg-файл в папке data вашего скетча. Можно просто перетащить файл на окно редактора, как мы делали с изображениями.

В коде нужно объявить несколько объектов класса PShape. Затем следует загрузить файл в объект через функцию loadShape(). В методе draw() файл выводится с помощью функции shape(). Первый параметр - это ссылка на объект PShape, второй и третий - координаты X и Y. Четвёртый и пятый параметры могут быть добавлены, если нужно изменить размеры фигуры. Файлы SVG выводятся со своими собственными параметрами, но мы можем изменить цвет объекта при помощи disableStyle(), fill(), stroke(). После завершения изменений вызовите функцию enableStyle().

PShape sleepingCat;

void setup()
{
  size( 400, 200 );
  smooth();
  sleepingCat = loadShape("sleepingcat.svg");
  shapeMode(CENTER);
} 

void draw() {
  background(155);
  shape(sleepingCat, 200, 100, 300, 250);
}

Чёрному коту не везёт. Перекрасим его в рыжий цвет.

PShape sleepingCat;

void setup()
{
  surface.setTitle("Спящик котёнок");
  size( 400, 200 );
  smooth();
  sleepingCat = loadShape("sleepingcat.svg");
  shapeMode(CENTER);
} 

void draw() {
  background(155);
  // рыжий кот
  sleepingCat.disableStyle();
  fill( 255, 128, 0 );
  stroke( 255 );
  strokeWeight(2);
  shape (sleepingCat, 200, 100, 300, 250);
  sleepingCat.enableStyle();
}

Файл SVG является XML-файлом, в котором содержатся описания отдельных фигур. Мы можем получить доступ к ним по идентификатору через функцию getChild() и раскрашивать отдельные участки изображения.

На главную страницу Processing

Реклама