Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Дослідження інструментів для роботи з векторною графікою - InkScape
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
СІ
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Інші
Предмет:
Телекомунікації
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
Інститут телекомунікацій, радіоелектроніки та електронної техніки
Кафедра радіоелектронних пристроїв та систем
Лабораторні завдання
з дисципліни “Мультимедійні технології”
на тему:
«Дослідження інструментів для роботи з векторною графікою - InkScape»
Львів – 2017
Зміст
Лабораторна робота 1. «Побудова графіка функції» 3
Завдання 3
Вказівки до виконання 4
Лабораторна робота №2. «Створення графів» 8
Завдання 8
Приклад 10
Лабораторна робота №3. «Робота з текстом» 16
Завдання 16
Приклад 16
Лабораторна робота №4. «Об'ємна кнопка» 19
Завдання 19
Приклад 19
Лабораторна робота 1. «Побудова графіка функції»
Завдання
Побудувати графік довільної функції в діапазоні від -3 до 3. Використовуючи інструмент «крива Безьє».
Варіанти завдань:
1
Y=2sin(x)
2
Y=2x
3
Y= cos2x
4
5
Y=| |x-1|-|x-2| |
6
Y=(1+x)x
7
Y=x2
8
Y=2x2
9
y = 20 + 2 (x - 1) 2
10
Y=x2/2
11
Y=
12
Y=2+
13
14
15
Вказівки до виконання
Для прикладу побудуємо графік функції
y = 50 - 5 (x - 2)2
Протабулювати функцію, наприклад в Excel, з кроком 1.
Рисунок 1 - Табулювання функції
Таким чином, нам буде потрібно позначити 7 точок.
Розмітити лист в InkScape за допомогою напрямних.
Спочатку визначимося з масштабом. В даному випадку по горизонталі візьмемо масштаб 1 = 1 см, а по вертикалі 10 = 1 см.
Напрямні - це допоміжні лінії, що дозволяють розмітити лист. Вони «витягуються» з лінійок навколо листа. Подвійний клік по направляючої викликає вікно для редагування її положення на аркуші. За замовчуванням, всі об'єкти «прилипають» до напрямних. Вкл. / Викл. цей режим можна за допомогою кнопкина панелі «Прилипання» (праворуч). Об'єкт не буде «прилипати», якщо при переміщенні утримувати Alt.
Додайте напрямні для горизонтальної та вертикальної осі, а потім направляючі, щоб відзначити кожну точку майбутнього графіка.
Рисунок 2 - Робоча область розмічена за допомогою направляючих
Накреслити графік функції.
За допомогою інструменту «Криві Безьє» ( «Перо»)(Shift + F6) спочатку намалюйте графік у вигляді ламаної. Потім виділіть центральні вузли (F2 або кнопка) І перетворіть їх в згладжені (). Задайте відповідну товщину ліній, наприклад, 1мм.
Рисунок 3 - Процес побудови кривої
Додайте осі, підписи осей і міток на них.
Для малювання осей використовуємо той же інструмент, без згладжування. Додайте стрілки на кінцях ліній. Товщина лінії для обраного масштабу підійде 0,5мм.
Підписи додаються за допомогою інструменту «Текст» . Встановіть відповідний шрифт і розмір тексту. У прикладі - Times New Roman, 24pt. Вирівняйте положення підписів уздовж кожної осі за допомогою команди «Об'єкт» - «Вирівняти і розставити ...»
Рисунок 4 - Створений графік
Підписати вид функції на графіку.
Напрямні більше не потрібні, їх можна видалити або приховати (в меню «Вид» - «напрямні»).
Рисунок 5 - Оформлений графік
Контрольні запитання
Для чого викоистовується інструмент крива Безьє?
Що таке напрямні та для чого вони необхідні?
Як створюються направляючі?
За допомогою якого інструменту створюється текст?
Як створюються згладжені вузли?
Лабораторна робота №2. «Створення графів»
Завдання
Намалювати граф довільної форми, використовуючи аксонометричну сітку.
Таблиця 1.
Варіант №
Кількість вершин
1
6
2
5
3
4
4
14
5
7
6
9
7
10
8
6
9
12
10
9
11
13
12
6
13
5
14
9
15
11
16
7
17
8
18
5
19
15
20
9
Щоб не використовувати велику кількість напрямних, може бути корисним просто активувати сітку в inkscape. Зробити це за допомогою головного меню "Вид" - "Сітка" або по гарячій клавіші # (Shift + 3).
Сітки діляться на два типи: прямокутна і аксонометрична. Параметри сітки можуть бути визначені в головному меню "Файл" - "Властивості документа". Найбільш поширеним є прямокутна сітка, яка складається з вертикальних і горизонтальних ліній. Аксонометрична сітка містить додатково діагональні лінії і може бути цікава для технічних або архітектурних креслень. На малюнку нижче приведе приклад аксонометрической і прямокутної сіток inkscape.
Рисунок 1- Аксонометрична та прямокутна сітка
Як користуватися сіткою в inkscape
Використовуйте список, що розкривається в діалоговому вікні властивостей документа (Рис.2), щоб вибрати тип сітки, яку ви плануєте використовувати використовувати, а потім натисніть кнопку "Створити". Під фразою "Певні користувачем сітки" (для одного документа можуть бути визначені кілька сіток) буде створена нова вкладка з параметрами створеної сітки. Потім визначте одиниці, які ви хочете використовувати, визначте точку відліку по горизонталі і вертикалі (X і Y) і відстань між сусідніми лініями сітки. При використанні аксонометрической сітки з'являється додатковий параметр, що визначає кут двох ліній сітки (Рис. 3).
Граф - абстрактний математичний об'єкт, який представляє собою безліч вершин графа і набір ребер, тобто з'єднань між парами вершин. Наприклад, за безліч вершин можна взяти безліч аеропортів, що обслуговуються деякої авіакомпанією, а за безліч ребер взяти регулярні рейси цієї авіакомпанії між містами.
Для різних областей застосування види графів можуть відрізнятися спрямованістю, обмеженнями на кількість зв'язків і додатковими даними про вершини або ребрах. Багато структур, які мають практичний інтерес у математиці та інформатиці, можуть бути представлені графами. Наприклад, структуру Вікіпедії можна змоделювати за допомогою орієнтованого графа, в якому вершини - це статті, а дуги (орієнтовані ребра) - гіперпосилання (тематична карта).
Приклад
Для того, щоб намалювати граф, можна скористатися сіткою, але не звичайною прямокутною, а аксонометричною - її лінії можуть бути нахилені під різними кутами. Для створення такої сітки зайдіть в «Файл» - «Властивості документа».
Перейдіть в закладку «Grid» (Сітки). У випадаючому списку «Creation» (Створення) виберіть тип сітки «Axonometric grid» (Аксонометрична сітка) і натисніть кнопку «New» (Створити).
Рисунок 2 - Налаштування аксонометричної сітки
Створиться вже потрібна нам сітка (нічого змінювати навіть не доведеться) - кути ліній сіток щодо горизонталі - 30 °, тобто між собою у них буде кут 60 °.
Рисунок 3 - Меню налаштування сітки
Проставлені галочки прибирати не треба, так як вони означають, що сітка включена ( «Enabled»), видима ( «Visible») і якщо включено прилипання до сітки, то прилипати можна тільки до видимих лініях сітки ( «Snap to visible grid lines only» ).
Вікно можна закрити і після перевірити, що в настройках включено прилипання до сітки.
Тепер можна приступати до малювання. Граф складається з 7 вершин та 8 дуг.
Нарисуємо за допомогою кривої Безьє довільний контур.
Рисунок 4 - Довільний контур (Інструмент Малювання кривих Безьє або прямих ліній)
Звертаю вашу увагу на те, що зараз ми бачимо не всі лінії сітки, щоб побачити проміжні лінії, потрібно наблизити картинку, найпростіше це зробити за допомогою коліщатка на мишці при затиснутою клавіші Crtl. Не виходьте за кордон, що позначає середину між променями, наближайте і віддаляйте зображення для зручності малювання.
Рисунок 5 - При збільшені масштабу, покращується зручність до точних деталей
Додамо вершини графу за допомогою інструменту «Створення кіл, еліпсів та дуг».
Рисунок 6 - Додали 7 вершин графу
Тепер додамо підписи вершин. Підписи додаються за допомогою інструменту «Текст» . Встановіть відповідний шрифт і розмір тексту. У прикладі - Times New Roman, 24pt.
Рисунок 7 - Граф з доданим текстом
Тепер потрібно вимкнути аксонометричну сітку для нормального вигляду.
Рисунок 8 - Вимикаємо видимість аксонометричної сітки
Рисунок 8 - Граф
Контрольні запитання
Що таке граф та для чого вони необхідні?
Для чого використовується аксонометрична сітка?
Як створюється аксонометрична сітка?
Які параметри аксонометричної сітки можливо задавати?
Для яких цілей використовується прилипання?
Лабораторна робота №3. «Робота з текстом»
Завдання
Створити довільний текст і оформити його за зразком: стрибаючі літери, подвійне обведення будь-якими кольорами і тінь.
Приклад
1. Візьміть інструмент текст і створіть якись напис.
Рисунок 1 - Створений текст
2. Зробимо букви нахиленими в різні боки на різній висоті. Поставте курсор між літерами тексту. Спробуйте, утримуючи клавішу Alt, натиснути на клавіатурі стрілки вправо або вліво. Букви розсуваються. А якщо утримувати на клавіатурі комбінацію клавіш Alt + Shift, то розсуватися букви будуть в десять разів швидше.
Якщо поставити курсор між літерами тексту, утримуючи клавішу Alt, натискати на клавіатурі стрілки вверх і вниз, то буква тексту буде підніматися або опускатися.
Комбінація клавіш Alt + [і Alt +] повертає букву тесту. Клавіша Shift разом з Alt прискорює і цей процес теж.
Налаштуйте положення кожної літери.
Рисунок 2 - Деформований текст
3. Виділіть текст інструментом виділення. Відкрийте віконце заливки і обведення. Зробити це можна за однойменним пункту в головному меню «Об'єкт» або по комбінації клавіш Shift + Ctrl + F. Встановіть колір заливки суцільний колір білий і колір обведення жовтий.
Рисунок 3 - Створення обведення
4. Додамо подвійну обведення. Виділіть текст інструментом виділення. Зайдіть в головне меню «Контур» і виберіть пункт «Пов'язана Втяжка» або натисніть Ctrl + Alt + J. Тепер ви повинні побачити ось такий ромб вгорі контуру, як на малюнку нижче.
Рисунок 4 - Створення об’ємного тексту
При цьому автоматично активується інструмент керування вузлами. Натисніть їм на вищевказаний ромб і потягніть трохи вгору.
Рисунок 5 - Об’ємний текст
Попередньою дією ми створили копію тексту, яка прив'язана контуром до початкового тексту. Виділіть тепер інструментом виділення збільшений текст. Встановіть колір заливки суцільний світло-зелений і колір обведення темно-зелений.
Рисунок 6 - Виконали заливку збільшеного тексту
5. Для більшої реалістичності можна застосувати до обох наших об'єктів (великий зелений і малий жовтий контури) ефект тіні. Він доступний в меню «Фільтри» - «Світло і тінь» - «відкидає тінь ...».
Рисунок 7 - Додали контуру
Контрольні питання
Яким чином можна деформувати текст?
Як створюється об’єм тексту?
Як виконується заливка збільшеного тексту?
Яким чином відбувається створення контуру
Лабораторна робота №4. «Об'ємна кнопка»
Завдання
Створити квадратну кнопку довільного вигляду.
Рисунок 1 - Приклад кнопки
Приклад
1. Малюємо квадрат 250х250 пікселів, радіус заокруглення кутів задаємо в 50 пікселів. Заливаємо лінійним градієнтом від чорного до 50% сірого. Дублюємо (Ctrl + D), задаємо дублікату розміри 245х245 пікселів і заливаємо градієнтом від 60% сірого до 20% сірого кольору. Центруємо фігури.
Рисунок 2 - Формування основи та її градієнту
2. Дублюємо верхній квадрат, задаємо дублікату розміри 235х235 пікселів і вирівнюємо з попереднім квадратом по верхній і лівій стороні. Заливаємо радіальним градієнтом, додаємо опорну точку і задаємо центру і опорної точці білий колір, крайній точці - світло-сірий.
Рисунок 3 - Формування 2-го шару та його градієнту
3. Дублюємо верхню фігуру, задаємо розміри 230х230 пікселів, заливаємо чорним кольором і вирівнюємо так само, як і попередню фігуру - по верхній і лівій стороні. Малюємо пером фігуру, показану на малюнку, виділяємо цю фігуру і чорний квадрат і виконуємо різницю.
Рисунок 4 - Формування 3-го шару з допомогою Булевих функцій
4. Знову дублюємо один з квадратів, задаємо розміри 180х180 пікселів, центруємо з самим нижнім квадратом. Заливаємо лінійним градієнтом від чорного до білого. Дублюємо, задаємо розміри 175х175, центруємо, заливаємо лінійним градієнтом чорний - 5% сірий - чорний.
Рисунок 5 - Формування 4-го шару
5. Дублюємо верхній квадрат, задаємо розміри 170х170, центруємо, заливаємо радіальним градієнтом бажаного кольору.
Рисунок 6 - Формування 4-го шару та його заливка 6. Робимо відблиск. Дублюємо кольоровий квадрат, задаємо розміри 165х165, центруємо, заливаємо для зручності білим кольором. Дублюємо білий квадрат і рухаємо його верх, приблизно до середини (або стрілкою на клавіатурі, або мишкою з затиснутою клавішею Ctrl). Виділяємо обидва білих квадрата і виконуємо Перетин (Ctrl + *). Заливаємо вийшла фігуру лінійним градієнтом від білого 65% непрозорості до білого 10% непрозорості.
Рисунок 7 - Формування 5-го шару створення відблиску
7. Виділяємо найнижчий квадрат (клавішею Tab або кліками мишки з затиснутою Alt добираємося до самого низу кнопки). Дублюємо, заливаємо темно-сірим або чорним кольором, опускаємо під кнопку клавішею End і розмиваємо на 4-5 одиниць.
Рисунок 8 - Формування тіні
8. Кнопка готова. Можна додати який-небудь текст або цифри, зробити для них тінь так само, як і для кнопки і опустити під відблиск.
Рисунок 9 - Створюємо напис
Контрольні питання
Яким чином створюються фігури?
Де задаються розміри фігур, та у яких величинах?
Що таке Булеві операції та які вони бувають?
Як користуватися Булевими операціями?
Як створити відблиск?
13.04.2018 21:04-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора