Технічне завдання. 
Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів

Це технічне завдання поширюється на розробку HTML5 додатку, для візуалізації та маніпуляції сітками елементів.

HTML5 додаток розробляється на підставі здачі диплома відповідно до плану учбового процесу на 2013;2014 навчальний рік.

Вимоги до функціональних характеристик:

• 1. Система повинна забезпечувати можливість виконання наступних функцій:
  • · Можливість маніпулювати елементами;
  • · Виведення координат на екран;
  • · Можливість очищення вікна canvas.
• 2. Для цих завдань мають бути реалізовані:
  • · Алгоритм, зчитування координат з файлу;
  • · Iмпорт і експорт сіток;
  • · Система авторизації Yii;
  • · Сторінка для додавання сіток на сайт;
  • · Сторінка управління доступними сітками.
• 3. Вимоги до інформаційної і програмної сумісності:

HTML5 додаток повинен працювати в усіх, нових, веб-браузерах.

Результати аналізу існуючих технологій векторної графіки, доступних в останніх версіях браузерів говорять про те, що стандартні веб-технології можна інтерактивно і успішно застосовувати в рамках існуючих і нових сценаріїв. У нас є всі можливості, щоб забезпечити декларативною анімації підтримку рекламних площ в майбутньому. При розробці функцій на основі сценаріїв ми можемо випереджати конкурентів і забезпечувати багаті можливості графіки, заснованої на стандартах, у веб-додатках та на веб-сторінках.

HTML5 Canvas.

Минуло вже більше чотирьох років з моменту, коли був анонсований перший чернетку специфікації стандарту розмітки вебсторінок — HTML5, але до цих пір небагато ресурсів на HTML5 і, напевно, лише сота частка верстальників використовують HTML5 на практиці, при верстці сторінок сайту, хоча всі сучасні браузери підтримують даний стандарт. — це п’ята версія основного мови розмітки вебсторінок, розробка якої почалася ще в 2007 році. В даний час специфікація HTML5 знаходиться в стадії розробки, закінчити яку планують в 2014 році. Всі сучасні браузери вже підтримують основні елементи HTML5.

Найпомітніші HTML5 можливості - це поява таких тегів як aside, footer, header, nav і article і повна підтримка новітніх типів полів введення у формах, включаючи атрибут placeholder (підказує підказку в поле вводу), phone і email (які забезпечують правильну валідацію), а також ряд новітніх медіаелементів, які включають audio, video і canvas, що дозволяє динамічно змінювати або малювати контент. стреміться зробити інтернетсайти боле семантично правильними, більш інтерактивними, більш швидкими. Новий HTML стандарт включає функції, які раніше вимагали Flash або Javascript, а це означає, що сайти стануть менш залежні і зможуть працювати на багатьох платформах.

У зв’язку з цим значний інтерес представляє вивчення даної області. Метою даної курсової роботи є розгляд стандарту HTML5, його особливості, переваги та недоліки, приклади реалізацій, приклади сайтів на HTML5 як зарубіжних, так і російських.

Переваги HTML5.

1. Підвищена безпека В даний час, використовуваний безліччю вебсайтами тег iframe містить в собі явну загрозу безпеці для користувача системи. Справа в тому, що функцією цього тега є відображення контенту з іншого сайту, наприклад в плані реклами або відомостей про стан будь-яких даних. Але якщо сайт, що передає таку інформацію піддасться злому, з’являється велика ймовірність того, що зловмисники через нього направлять шкідливий код на сайтприймач, який і піддасть його користувачів небезпеки зараження вірусом.

У HTML5, щоб уникнути подібної ситуації для тегів iframe була спроектована технологія Sandbox. Завдяки їй, всі скрипти, що запускаються через iframe працюватимуть в спеціально обмеженою віртуальному середовищі, яка не випустить результати їх роботи за межі браузера, а значить і не зможе вразити призначену для користувача операційну систему. Навіть якщо припустити, що запуск вірусу допомогою цього тега все ж відбудеться, будь-які серйозні наслідки він понести вже не зможе.

2. Введення даних У HTML5 стає простіше і безпечніше. Правильність введення даних контролюється в режимі реального часу безпосередньо під час введення. У HTML4.0 перевірка помилок і повідомлення про них відбувається вже після відправки документа, що може створювати проблеми користувачам.

Підтримка повноцінної графіки До недавнього часу безперечним лідером анімованої графіки для браузерів була технологія Flash. З появою в новому HTML5 стандарті такого інструменту як canvas позиції Flash-графіки будуть, ймовірно, сильно потіснені.

Суть такого потужного нововведення як canvas полягає в тому, що для браузерів на екрані виділяється спеціальний простір, положення якого на веб-сторінці визначається розробником сайту. У цій області за допомогою цілого набору спеціальних графічних HTML5 команд можна складати графічні зображення, в тому числі і анімовані, практично будь-якої складності. Більше того, для 3 -D графіки розробляється спеціальний набір команд аналогічних всесвітньо відомого стандарту тривимірної графіки OpenGL. Тепер браузер буде здатний відтворювати не тільки красиві двомірні інтерактивні додатки, а й повноцінні тривимірні ігри.

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

3. Відео та аудіо Для того щоб відтворити відео або аудіо потік в браузері користувачеві доводиться вдаватися до допомоги все тієї ж Flash технології, необхідні в HTML4.0.

Браузерам для цього доводитися постійно користуватися Flash програвачами, а також завантажувати постійні оновлення від Adobe для цієї технології, без яких користувачі сильно ризикують заразити свої комп’ютери вірусами через проломи в старих версіях Flash. прізван нарешті позбавити браузери від цих додаткових програм і дати їм можливість повноцінного відтворення аудіо та відео контенту своїми силами. Для цього в HTML5 коді передбачені спеціальні теги, такі як і. Втім, у цього нововведення є і свої недоліки, наприклад відсутність єдиного стандарту для відеокодеків, що не сприяє поки широкому поширенню цієї зручною для користувача і веброзробників технології.

4. Багаторазове збільшення швидкості роботи Складно уявити сучасні веб-сайти без великого числа інтерактивних форм, відео та аудіо вставок, анімованих графічних елементів і різного роду оживляючих веб-сайт програм — скриптів. Звичайно, потужності сучасних обчислювальних машин цілком вистачає, щоб обробляти таку величезну кількість елементів веб-сторінки, але Інтернет технології не стоять на місці, і чим більше буде розвиватися візуалізація, інтерактивність і якість медіа-інформації, тим вище будуть вимоги до «заліза «користувача.

Звичайно ж, проектувальники HTML5 не могли обійти цю проблему стороною. Новий стандарт забезпечує підтримку багатопоточності, яку іменували як Web Works. Таким чином, сучасні багатоядерні системи отримують можливість паралельно виконувати обробку скриптів і тим самим збільшити швидкість роботи сайту на кілька порядків залежно від його конструкції і складності.

5. Технологія Web Storage.

Користувачі комфортно працюють з тими сайтами, які здатні зберігати зміни в налаштуваннях, наприклад для зовнішнього вигляду робочого простору. Для того, щоб зберегти яку інформацію про дії користувача сайт зазвичай користується технологією cookies, яка дозволяє зберігати на комп’ютері відвідувача текстовий файл зі своїми даними.

Технологія Web Storage для HTML5 затьмарить cookies своїми можливостями тільки тому, що представляє з себе не форматно обмежений текстовий файл, а спеціально орієнтовану базу даних для різних видів інформації. Тепер в такій базі сайт може зберігати не тільки окремі настройки сайту, а цілі фрагменти його коду, що дозволить працювати з вебдодатками навіть за відсутності підключення до мережі Інтернет.

6. Структурні можливості HTML5.

Роблять структуру веб-документа простіший, а код чистіше. Нові семантичні елементи header, nav, section, article, aside і footer можуть використовуватися замість контейнерів div, що застосовуються зараз в HTML4.0. нові елементи дозволяють більш конкретно описувати заголовок, нижній колонтитул, колонки тексту та інші. Ці нововведення можуть використовуватися для автоматичної генерації змісту та організації більш ефективної і простий навігації по вебсторінці. Код при цьому стає чистішим і менш засміченим другорядними деталями.

Кілька конкретних прикладів:

Приклад 1. Замість громіздкої записи HTML4:

7).

Переваги для кінцевого користувача З HTML5 життя кінцевого користувача стає помітно легше:

Не потрібно установка численних додаткових програм;

HTML5, на відміну від HTML4 сумісний, крім ПК і ноутбуків, ще й з планшетами, смартфонами і сучасними моделями телевізорів, які надають доступ в інтернет.

Недоліки HTML5.

На сьогоднішній день в HTML5 присутні мінуси, через які він програє колишнім технологіями. Має місце деяка вразливість HTML5 в області захисту даних. Таку вразливість створює більший, в порівнянні з cookie стандарту HTML4, обсяг даних, які зберігаються на жорсткому диску користувача. Небезпека полягає в тому, що у великих обсягах даних може міститися більше докладна інформація про користувача. Експерти висловлюють думку, сто якщо сховище HTML5 залишається на комп’ютері користувача протягом багатьох місяців, то інтернетсайти, звертаючись до нього через JavaScript після завантаження сторінки, можуть непомітно для користувача збирати і передавати дані власнику сайту.

Відносно мультимедійного контенту теж є недоліки, що не дозволяють зробити остаточний вибір на користь HTML5. Як наголошується в офіційному блозі YouTube, підтримка відео HTML5 дозволяє відтворювати мультимедійний контент на комп’ютерах і пристроях, які не підтримують Flash Player, проте повною мірою HTML5 всім цим потребам все ще не відповідає. На сьогоднішній день Adobe Flash забезпечує найкращу платформу для відтворення відео. У HTML5 поки немає, наприклад, повноекранного режиму. Є недоліки, що стосуються використання HTML5 для створення ігор. І, крім того, новий стандарт поки що не підтримується всіма браузерами.

Різниця в форматах HTML5 відео / аудіо в різних браузерах може привести:

• 1) До збільшення часу тестування і розробки;
• 2) До збільшення витрат дискового простору і навантаженні на сервер.

Також є й інші недоліки у використанні HTML5 відео / аудіо:

• 1) На даному етапі жоден їх кодеків не може підтримувати шифрування потоку з розпакуванням на клієнті, тобто не мають можливості віддавати контент в одну точку (теоретично його одночасно без шифрування зможе дивитися необмежену кількість клієнтів, а отже доведеться регулювати доступ до конкретного потоку на стороні сервера, що призведе до витрат потужностей);
• 2) Немає жодного універсального рішення окрім як Flash для створення мітингів і онлайнтрансляцій прямо в браузері без установки додаткового ПЗ.

Недоліки HTML5 в розробці ігор:

Повільна робота ігор, створених за допомогою HTML5;

Не кожна платформа підтримує ігри, розроблені на HTML5;

При розробці гри на HTML5 потрібно набагато більше ресурсів і часу;

Відкритість коду HTML5 неприйнятна для безкоштовних ігор;

Відсутність потужних і зручних інструментів для створення ігор, особливо для анімації;

Неможливість адекватно упаковувати гру в один файл для дистрибуції на різних порталах;

Платформа Flash використовується також для анімації і розробки інтерфейсів, її застосовують для створення більш складної реклами і в тривимірній графіці. Вона постійно еволюціонує і вдосконалюється.

Як зазначив Філіп Ле Егар (Philippe Le Hegaret), керівник напрямку компанії W3C, яка розробляє стандарт HTML5, в найближчі роки не вийти відмовитися від технології Flash. Причиною цьому він назвав те, що буде потрібен тривалий час для переходу всіх вебклієнтів до підтримки HTML5. Протягом найближчого часу технології HTML5 і Adobe Flash будуть існувати.

Canvas.

Canvas — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій, а також анімації.

Елемент є частиною специфікації WhatWG Web applications 1.0, що відома як HTML 5.

вперше було втілено Apple в Mac OS X Dashboard Safari. У Gecko підтримка canvas з’явилася в версії 1.5, уPresto з версії 9.0 веб-браузера Opera. Internet Explorer підтримує canvas починаючи з 9-ї версії. Щоб відобразити в html документі слід використати наступний код:

Він дуже схожий на тег , з тією лише різницею, що не містить атрибутів src і alt. Елемент має всього два атрибути — width і height. Обидва вони не є обов’язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, canvas буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування.

Атрибут id не є специфічний для елемента, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента — гарна ідея, тому що це значно спрощує ідентифікацію його в нашому скрипті.

Стиль елемента може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в canvas. Якщо ніякі налаштування стилю не задані, canvas буде створений повністю прозорим.

Аварійний стан У зв’язку з тим, що елемент відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.

Це дуже просто: ми всього-лише надаємо альтернативний вміст всередині елемента canvas. Браузери, які не підтримують, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують, проігнорують вміст контейнера і нормально оброблять canvas.

Приміром, ми можемо видати текстовий опис вмісту canvas, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:

Використовуйте сучасніший браузер!

Або.

Подія onclick викликає цю функцію:

function draw_b () {.

var b_canvas = document. getElementById («b»);

var b_context = b_canvas.getContext («2d»);

b_context.fillRect (50, 25, 150, 100);

}.

Перший рядок функції не робить нічого особливого, вона просто знаходить елемент в DOM.

function draw_b () {.

var b_canvas = document. getElementById («b»);

var b_context = b_canvas.getContext («2d»);

b_context.fillRect (50, 25, 150, 100);

}.

Кожне полотно має контекст малювання. Як тільки ви знайшли елемент в DOM (за допомогою document. getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок «2D» в методі getContext ().

Отже, у вас є елемент і є контекст малювання, де визначені методи і властивості малювання. Мається ціла група властивостей і методів присвячених малювання прямокутників.

Властивість fillStyle може бути кольором, малюнком або градієнтом (докладніше про градієнтах трохи нижче). За замовчуванням fillStyle заливає суцільним чорним кольором, але ви можете встановити будь-що. Кожен контекст малюнка пам’ятає свої власні властивості при відкритті сторінки, поки ви її не поновіть.

fillRect (x, y, width, height) малює прямокутник, заповнений поточним стилем заливки.

Властивість strokeStyle як і fillStyle може бути кольором, малюнком або градієнтом.

strokeRect (x, y, width, height) малює прямокутник з поточним стилем лінії. strokeRect не заливати всередині, він просто малює кордону.

clearRect (x, y, width, height) видаляє пікселі у вказаному прямокутнику.

HTML5 — безсумнівний тренд. Причому, не стільки нова специфікація з новими тегами, скільки гармонійне і могутнє поєднання HTML + CSS + JS, витончено втирає носа Flash.

Вже зараз можна спостерігати красиві HTML — 5 сайти без мегабайтів зображень і без сотень кілобайт скриптів. Canvas дозволяє малювати в спеціальному елементі документа лінії, дуги, прямокутники, кола, заливати простір, маніпулювати текстом і картинками. Все це прекрасно описано в «Canvas Tutorial «Mozilla Developers Center з прикладами та рисунками.

Цей тег незвичайний тим, що не керує параметрами візуалізації тексту, як, наприклад, «це слово буде виділено курсивом «, а дає можливість намалювати на сторінці будь-яке зображення використовуючи команди javascript.

Фактично до появи canvas якщо вам було необхідно розмістити на сайті динамічне зображення, наприклад, графік відвідувань сайту по днях тижня. То ви або створювали php — скрипт (благо, навіть на безкоштовних хостингах давно є підтримка бібліотеки gd2 графічних функцій, таких як лінія, прямокутник, еліпс та інші). Або ви створювали flash — ролик, який також за допомогою своїх функцій малював зображення.

В окремих випадках можливе було використовувати кошти java applet або activex. Чим погані три останні підходу: flash як і java applet вимагає встановленого плагіна (і в разі java applet дуже немаленького розміру), activex — працюють тільки під iexplorer і тільки під windows (не кажучи про те, що у багатьох користувачів ця дірява і, прямо скажімо, небезпечна технологія просто відключена). І ще, наприклад, у мене на роботі корпоративний proxyсервер вирізає з сторінок flash — ролики, звичайно, це не показник, але все ж.

Підхід номер один, коли картинку генерує php код — універсальний, і надійний, правда споживає занадто багато надлишкової трафіку для деяких завдань. Наприклад, якщо ви створюєте додаток, який малює графік функції z = f (x, y), то більша частина отриманого зображення буде залита одним кольором фону і лише невелика частина картинки буде відображати лінії графіка функції. Для експерименту я створив картинку розміром 1024 * 768 з намальованою лінією синусоїди. Її розміри в різних форматах були такі: gif — 8 кб, jpeg — 33 кб, png — зашкалив за 210 кб. Останнє зауваження: наше додаток буде набагато зручніше, якщо користувач зможе отримувати графіки функцій без підключення до Інтернету, що у разі dial — up або погодинної оплати саме т. е.

Будемо вважати, що я вас переконав у корисності підходу з перенесенням генерації зображення з сервера на сторону клієнта, а тепер пару слів про історію та поточної ситуації з html canvas.

Тег canvas не входив ні в один зі стандартів, його придумала і реалізувала у своєму браузері safari компанія apple. Ідею підхопила група розробників mozilla і додала підтримку тега canvas в движок htmlвізуалізації gecko використовуваного в firefox і суміжних продуктах.

Потім інновацію підтримала компанія Opera Software, і, починаючи з 9-ої версії, браузер opera також знає тег canvas. Самі «активні» розробники самого «передового «браузера (я говорю про iexplorer) в цей час як завжди спали. На щастя novell і google почали проекти з реалізації плагіна підтримує canvas для iexplorer — а. Додалася чи підтримка canvas в новомодному 7-ий iexplorer я не знаю, тому ніде згадок в internet про це я не знайшов, а спробувати не можу через небажання викачувати сей монструозний продукт. Слід зазначити, що даний тег планують внести в перспективний п’ятий стандарт html.

Найпростіший приклад використання canvas це просто вставити його в тіло html документа, не забувши про fallback. Простіше кажучи, якщо браузер клієнта не підтримує даний тег, то він повинен побачити деякий поясняющее повідомлення. У прикладі нижче це розміщене всередині тега canvas зображення. Дуже важливо дати canvasу ідентифікатор для цього служить атрибут id, якщо ви так не зробите, то не зможете з javascript звертатися до canvas і малювати на ньому. В якості стильового оформлення я задав області canvas кордон чорного кольору, це тільки для зручності подальшої роботи.

draw !

Наступний крок це створення функції, яка буде викликатися при натисканні на кнопку button. Функція повинна отримати доступ до об'єкта «canva «, для цього ми застосуємо стандартний метод getElementById («той самий ідентифікатор об'єкта, який ви, сподіваюся, не забули задати »).

Потім слід перевірити, що браузер вміє малювати, слід попросити його для canvas повернути так званий контекст малювання (простіше кажучи, місце, де малюють). І потім, озброївшись довідником функцій, можна починати безпосередньо малювати. Найпростіше це створити прямокутник, зафарбований деяким кольором, при цьому ви можете задати колір як звичний rgb, або ж rgba — буква a на кінці дає нам можливість задати alpha компоненту або прозорість.

Для того щоб намалювати прямокутник є три функції: fillRect, strokeRect, clearRect — які відповідно малюють прямокутник суцільним кольором, тільки кордон прямокутника, очищають частина області малювання. Всі ці функції отримують як параметр координати лівого верхнього кута прямокутника і його розміри.

function draw () {.

var canvas = document. getElementById (' canva ');

if (canvas.getContext) {.

var ctx = canvas. getContext ('2 d ');

/ / Попереджаючи наступне питання, немає, тривимірного контексту малювання немає,.

/ / Малювати можна тільки на площині.

ctx.fillStyle = «rgb (200,0,0)» ;

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = «rgba (0, 0, 200, 0.5)» ;

ctx.fillRect (30, 30, 55, 50);

ctx.fillStyle = «rgb (0,0,0)»; / / Чорний колір

ctx.fillRect (100,100,100,100);

ctx.clearRect (125,125,60,60);

ctx.strokeRect (150,150, 120,120);

}.

}.

Якщо вам необхідно намалювати більш складну фігуру, то слід використовувати Path. Path — це просто шлях по якому водиться віртуальний олівець. Шлях повинен початися, олівець проводить кілька ліній (дуг, кривих Безьє, прямокутників і т.д.), потім шлях закривається (цей крок необов’язковий, наприклад, ви самі довели лінію від останньої точки до першої). І останній крок — це запуск отрисовки або контуру Path, або її зафарбування, як варіант малюється і контур і фонова зафарбування одночасно.

Для того щоб намалювати лінію ви використовуєте дві базові функції moveTo (x, y), і lineTo (x, y). Перша з них піднімає невидимий олівець і переміщує його в точку (x, y), а другий переміщує олівець в точку (x, y) уже ведучи олівець по «листу» .

Якщо вам хочеться намалювати коло, дугу, то використовуйте функцію arc (x, y, radius, startAngle, endAngle, anticlockwise), її параметри соотвественно координати центру кола або дуги, потім йде радіус, параметри startAngle і endAngle — задають початок і кінець дуги в радіанах (і це важливо), останнім йде параметр anticlockwise — логічний ознака того, чи буде дуга малюватися за годинниковою або проти годинникової стрілки. У прикладі нижче я малюю дві зірки, одна з яких відображається у вигляді контура, другий у вигляді заливки суцільним кольором, також малюється приклад дуги. Для того щоб задати колір контуру використовується властивість strokeStyle.

function draw () {.

var canvas = document. getElementById (' canva ');

if (canvas.getContext) {.

var ctx1 = canvas. getContext ('2 d ');

var ctx2 = canvas. getContext ('2 d ');

ctx1.beginPath ();

ctx2.beginPath ();

var deltaI = 0.1;

ctx1.moveTo (200 + 100 * Math. cos (0), 200 — 100 * Math. sin (0));

ctx2.moveTo (200 + 170 * Math. cos (0), 200 — 170 * Math. sin (0));

for (var i = 0; i < 2 * Math. PI; i + = deltaI) {.

ctx1.lineTo (200 + 100 * Math. cos (i), 200 — 100 * Math. sin (i));

ctx1.lineTo (200 + 150 * Math. cos (i + deltaI), 200 — 150 * Math. sin (i + deltaI));

ctx2.lineTo (200 + 170 * Math. cos (i), 200 — 170 * Math. sin (i));

ctx2.lineTo (200 + 190 * Math. cos (i + deltaI), 200 — 190 * Math. sin (i + deltaI));

}.

ctx1.closePath ();

ctx1.stroke ();

ctx2.closePath ();

ctx2.fillStyle = «rgb (120,78,89)» ;

ctx2.fill ();

}.

ctx1.strokeStyle = «rgba (255,255,255,125)» ;

ctx1.beginPath ();

ctx1.arc (200, 200,40, 45 * (Math.PI / 180), 315 * (Math.PI / 180), false);

ctx1.closePath ();

ctx1.stroke ();

}.

Зверніть увагу на одночасне існування двох контекстів малювання. Всі приклади коду даної статті ви може знайти на сайті автора: http://black-zorro.jino-net.ru. Наступного разу я покажу як відобразити на canvas існуючі зображення jpeg / gif, а також як працювати з кривими Безьє, крім того, ми зробимо введення в трансформації зміщення, обертання, масштабування.