розробка html5 додатку для візуалізації та маніпуляції сітками елементів

• Название: розробка html5 додатку для візуалізації та маніпуляції сітками елементів
• Анкор: Diplom (1).doc
• Дата: 08.07.2018
• Размер: 0.97 Mb.
• Имя файла: Diplom (1).doc
• Тип: Документы; #21210
• страница: 1 из 2

ДЕРЖАВНИЙ ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД

«ЗАПОРІЗЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ»

МІНІСТЕРСТВА ОСВІТИ І НАУКИ УКРАЇНИ

МАТЕМАТИЧНИЙ ФАКУЛЬТЕТ

КАФЕДРА МАТЕМАТИЧНОГО МОДЕЛЮВАННЯ

КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА

на тему: «РОЗРОБКА HTML5 ДОДАТКУ ДЛЯ ВІЗУАЛІЗАЦІЇ ТА МАНІПУЛЯЦІЇ СІТКАМИ ЕЛЕМЕНТІВ»

Виконав:	студент		4		курсу, групи	5130-1
напряму підготовки				6.040201 – математика
				(шифр і назва напряму підготовки)
Є.А. Коваль
(ініціали та прізвище)
Керівник		доцент, к.ф.-м.н. Чопоров С.В.
		(посада, вчене звання, науковий ступінь, прізвище та ініціали)
Рецензент		доцент, к.ф.-м.н. Курапов С.В.
		(посада, вчене звання, науковий ступінь, прізвище та ініціали)

Запоріжжя – 2014

ЗМІСТ

КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА 1

ЗМІСТ 1

Вступ 3

1. SVG або Canvas 4

1.1 ВВЕДЕННЯ 31

1.2 ПІДСТАВА ДЛЯ РОЗРОБКИ 31

1.3 ВИМОГИ ДО ПРОГРАМИ АБО ПРОГРАМНОГО ВИРОБУ 31

РОЗДІЛ №2 33

Введення 33

РОЗДІЛ №3 51

Вступ

HTML еволюціонує , забезпечуючи поліпшену і складнішу стандартну графіком , що сприяє підвищенню якості взаємодії з користувачами . Це дає веб- розробникам можливість використовувати веб- технології на основі стандартів для створення інтерактивних сайтів і додатків зі складною графікою , не вдаючись до спеціалізованих технологіям , або написати код для конкретного браузера . У наступному розділі наведено основні поняття векторної графіки , а також :
• розглядаються відмінності між безпосереднім режимом і абстрактним режимом ;
• описується елемент Canvas HTML5 , використовуваний для графіки в безпосередньому режимі, і наводиться огляд технології Canvas ;
• вводиться поняття масштабованої векторної графіки ( SVG ) , описується набір елементів HTML5 , використовуваних для графіки абстрактного режиму і дається огляд SVG ;
• дані інструкції для нових і досвідчених розробників щодо застосування тієї чи іншої моделі векторної графіки (або обох залежно від сценарію) до векторної графіки і HTML5.

1. SVG або Canvas

У цьому розділі ми розглянемо порівняння SVG і Canvas ; наведемо порівняльні приклади коду , наприклад для побудови ходу променя і роботи з " зеленим екраном" .
Примітка Для перегляду багатьох прикладів даного розділу потрібно браузер ( такий як Windows Internet Explorer 9 ) , що підтримує елементи SVG і Canvas .


1.1 Векторна графіка


Векторна графіка не є новим поняттям . Для створення зображення у векторній графіці використовуються геометричні примітиви ( фігури , точки , лінії і багатокутники ) . Наприкінці шістдесятих в мову програмування Logo був доданий мова опису векторної графіки ( " черепашача графіка" ) для підтримки робота- черепахи , розробленого для виконання функцій малювання . З того часу складність графіки істотно зросла , проте основні поняття графіки залишилися колишніми.
За рівнем складності векторна графіка може бути простою , середньої складності і дуже складною. Нижче наведені приклади графіки різних рівнів складності.
Проста - виноска в документі або ілюстрації .
Середньої складності - ілюстрації ( наприклад , діаграми , схеми і карти).
Дуже складна - документи ( наприклад, використовувані при проектуванні ) .
Незважаючи на те що наведені приклади статичні , векторна графіка підтримує інтерактивність. Інтерактивність є ключовою функцією, що дозволяє істотно розширити можливості в цих сценаріях . Векторна графіка забезпечує інтерактивні і статичні формати для веб -додатків , додатків для настільних систем і пристроїв.
1.2 Короткий огляд сценаріїв векторної графіки

В Інтернеті :
- Використання векторної графіки в фонових зображеннях на веб- сторінках для підтримки великої кількості точок на дюйм і функцій масштабування зі стисненням .
- Властивості зіставлення ( такі як Карти Bing) для пошуку маршрутів.
- Інтерактивні біржові сайти , що відображають діаграми і графіки в режимі реального часу.
- Карти для виборчих пунктів та інші карти .
- Схеми розсадки для авіакомпаній або концертних залів.
- Ігри .


У додатках набору Office :
- Засоби для ефективної роботи , наприклад Microsoft Office Word

( картинки) , PowerPoint і Excel , а також фігури для Visio.
- Засоби автоматизованого проектування , що використовують для виведення результатів формати векторної графіки.
- Корпоративні інструменти , наприклад додатки Oracle і Microsoft Dynamics , обробні інтерактивні діаграми і графіки.


У пристроях :
- Розширені компоненти графічних користувацьких інтерфейсів.
- Інтерактивні міні -додатки та значки.
- Інтерфейс користувача кишенькових персональних комп'ютерів.


Професійні програми для дизайнерів
Професійні веб- дизайнери використовують наступний набір інструментів для перегляду векторної графіки:
- Adobe Illustrator , використовуваний для створення високоякісних статичних зображень , які можна експортувати у формат SVG ;
- Adobe Flash Professional , що дозволяє експортувати файли на векторному мовою на базі XML ;
- Microsoft Expression Blend для Windows Presentation Foundation ( WPF ) і Silverlight .
Важливо відзначити , що векторна графіка вже досить давно використовується в настільних комп'ютерах , пристроях і в Інтернеті.
Технології графіки HTML5
За допомогою HTML5 розробники або дизайнери можуть створювати описані вище особливості інтерфейсу за допомогою технологій , заснованих на стандартах. Це дозволяє істотно поліпшити взаємодію з користувачем , оскільки установка модулів не потрібно ( 50 % користувачів покидає сайти, що пропонують їх встановити) . В даний час за графіком, як правило , відповідає браузер . У разі використання Internet Explorer 9 застосовуються функції Microsoft Windows і графіка з апаратним прискоренням.
У наступному розділі описуються дві нові , але не схожі один на одного технології, наведено способи їх використання , а також переваги і недоліки кожної технології . Для полегшення вибору технології для окремого сценарію застосовується спектр сценаріїв векторної графіки.
На наступному малюнку показаний загальний спектр сценаріїв у векторній графіці. Будь-який сценарій може більше ставитися до Canvas або SVG. Це означає , що в конкретному сценарії одна технологія переважніше за іншу . Якщо сценарій потрапляє на середину спектра , можна вибрати будь-яку технологію.



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


1.3 Введення в технології


У наступному розділі описані технології створення векторної графіки в HTML5 для підготовки до подальшого обговорення сценаріїв .
Використання прикладів
Наступний приклад коду можна використовувати як шаблон для інших прикладів . Цей шаблон можна використовувати для створення SVG в HTML. Даний шаблон використовується у всіх прикладах цього розділу. Завдяки формату можна використовувати сценарії і стилі. Шаблон також включає тег META , який спрощує розробку SVG в локальній загальної папці. У прикладах використовується наступний формат . Спочатку вказується значимий код , а потім дається посилання на повний код .HTML












SVG

Мова SVG використовується для опису масштабованої векторної графіки , яка представляє собою модель абстрактної графіки , вона зберігається в пам'яті моделі , якою можна керувати за допомогою результатів виконання коду при повторному рендеринге . Цей принцип роботи відрізняється від безпосереднього режиму , який обговорюється далі в цьому розділі. Обидва режими доступні в HTML5.
SVG - це модель, що працює в абстрактному режимі , яка була представлена ​​в 1999 р. у відповідь на дві пропозиції незалежних постачальників ( корпорації Майкрософт і компанії Adobe ) . Робоча група консорціуму W3C по SVG випустила в 2001 р. специфікацію SVG , яка носить рекомендаційний характер. Сьогодні ми працюємо з SVG 1.1 2nd Edition , яка на момент написання цього розділу перебувала на стадії " останнього дзвінка".
Хоча SVG може виступати у вигляді ізольованого файлу , увагу спочатку приділяється його природної інтеграції з HTML.
Як і у випадку з мовою HTML , для вбудовування SVG в документ використовуються елементи , атрибути та стилі . При першій появі елемента

і є частиною класу HTMLDocument . Однак він містить додатковий інтерфейс SVGDocument , який забезпечує більш глибоке і складну взаємодію з об'єктами векторної графіки.
Елементи
Незважаючи на те що зовнішня програма-оболонка
Приклади :





Примітка. Для перегляду багатьох прикладів даного розділу потрібно браузер (такий як Windows Internet Explorer 9), що підтримує елементи SVG і Canvas.
Попередній HTML-код створює один квадрат з синім фоном, довжина і ширина якого дорівнює 100 пікселям.



Елемент підтримується в моделі DOM документа HTML. Для застосування стилів до елементів SVG , як і до інших елементів HTML , можна використовувати різні способи . У наступному прикладі показана таблиця .
стилі
Розробники можуть виявити, що атрибути їм вже знайомі. SVG має як звичайні атрибути , так і атрибути подання. На даному етапі це розмежування може здатися довільним , проте ключовим моментом є те , що до атрибутів подання можна застосовувати стилі відповідно з правилами використання стилів CSS.
Чотири прямокутника заливаються різними способами.
No fill (defaults the color to #000000)-->













Перший приклад показує , що відсутність атрибута кольору надає видимий ефект на графічний об'єкт. У цьому випадку в якості кольору за замовчуванням використовується чорний .
У другому прикладі для заливки прямокутника використовується клас class = " greenrect " . CSS для заливки квадрата :

rect.greenrect { fill : green ;}

У третьому прикладі для заливки квадрата рожевим кольором використовується вбудований стиль . В останньому прикладі для заливки квадрата червоним кольором використовується атрибут. Цей приклад також демонструє використання селекторів CSS. Стиль також включає наступне:

rect : hover { fill : yellow ;}

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


API атрибута та інші дії з моделлю DOM раніше застосовуються згідно поточним правилам атрибутів. Відмінність полягає в тому , що додаток для подання грунтується на атрибуті , який замінюється стилем , якщо це доречно.
Якщо ці атрибути задаються за допомогою основного атрибута або відповідних методів моделі DOM , то це впливає на представлення і модель DOM змінюється відповідним чином. Зверніть увагу на відмінності в синтаксисі при завданні висоти за допомогою моделі DOM SVG :

document.getElementById ( " myDiv " ) . style.height = " 200px " ;
/ / Alternatively
/ / document.getElementById ( " myDiv " ) . style = " height ; 200px " ;

document.getElementById ( " myRect " ) . height.baseVal.value = 200 ;
/ / Alternatively
/ / document.getElementById ( " myRect " ) . setAttribute ( " height " , " 200px " ) ;

Інтерактивність
Інша важлива відмінність SVG полягає в можливості створення взаємодії без ускладнення коду. Крім програмованої моделі DOM в SVG , як і в HTML , є модель подій . Подивіться на наступний малюнок , який є більш складним , ніж прямокутник або квадрат.
Для малювання фігур довільної форми використовується елемент path . У цьому прикладі дві фігури представляють Аляску і Гаваї в США .



Подія ініціюється, створюючи попередження, вказане раніше. Як і у випадку простого прямокутника, до цих складних фігурам також можна застосовувати селектори CSS. Простий механізм виділення можна задіяти за допомогою одного рядка CSS:
path:hover {fill:yellow;}

Canvas

Інший метод полягає в наданні користувачам багатою графіки за допомогою тега , представленого в HTML5 компанією Apple для браузера Safari та інших графічних міні -додатків. Він надає розширене програмований взаємодія для малювання графіки , яке працює в миттєвому режимі , включаючи прямокутник , контур і зображення, аналогічні SVG. Відображення графіки, що працює в миттєвому режимі , є моделлю "зробив і забув" , яка відображає графічні об'єкти безпосередньо на екрані і , отже , не має зв'язку з попередніми діями . На відміну від абстрактного режиму в Canvas відображаються графічні об'єкти не зберігаються. Незалежно від фактичних змін розробнику потрібно повторно викликати всі команди малювання , необхідні для опису всієї сцени кожен раз , коли потрібно новий кадр .

Елемент
Для використання можливостей елемента canvas веб -розробнику необхідно представити цей елемент:

Після цього можна використовувати інтерфейси API , які мають традиційні двомірні низькорівневі бібліотеки для малювання зображень або векторів.
Для маніпуляцій з графічними об'єктами в canvas використовується код JavaScript, який знайомий веб-розробникам і забезпечує підтримку графіки.
var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");
Як згадувалося раніше, в Canvas є фігури і об'єкти, аналогічні SVG. Для малювання прямокутника розробник може використовувати наступний код:
ctx.fillStyle = "rgb(0,0,255)";

ctx.fillRect(10, 10, 100, 100);
Переваги та недоліки цих методів і сценарії їх використання описуються далі в цій статті.
Кінцевий результат той же, що і при використанні SVG.


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

Програмування подій
Для малювання більш складних графічних об'єктів, наприклад карти штату Гаваї в попередньому прикладі, інтерфейс API canvas надає API елемента path, який підтримує команди, аналогічні командам елемента
в SVG, за винятком того, що API викликаються для кожного сегмента лінії замість виведення їх в одному атрибуті.
ctx.beginPath();

ctx.moveTo(233.08751,519.30948);

ctx.lineTo(235.02744,515.75293);

ctx.lineTo(237.29070000000002,515.42961);

ctx.lineTo(237.61402,516.23791);

ctx.lineTo(235.51242000000002,519.30948);

ctx.lineTo(233.08751,519.30948);

ctx.closePath();
API елемента path не обмежуються функціями moveTo і arc і включають квадратические криві і криві Безьє (як і в SVG ) .
Події та можливості визначення розташування покажчика миші на зображенні обмежені. Оскільки дані не зберігаються , програміст повинен перевести координату mouseX , mouseY в одному елементі тега і потім перенаправити цю команду фігурі , що знаходиться в структурі пам'яті. Для більш складних елементів path існують бібліотеки сторонніх виробників, які підтримують цю можливість , у тому числі вбудований API isPointInPath , але його застосування обмежене останнім намальованим елементом path . Таким чином , на відміну від SVG , в Canvas немає ні стилю , ні підтримки визначення попадання покажчика миші на декількох геометричних фігурах. Оскільки canvas не підтримує масштабування , при збільшенні карти штату Гаваї якість зображення істотно погіршується:



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

Canvas	SVG
На основі пікселів (динамічний. PNG)	На основі фігур
Один елемент HTML	Кілька графічних елементів, які входять до складу DOM
Змінюється тільки за допомогою сценарію	Змінюється за допомогою сценарію і CSS
Модель події / взаємодію з користувачем детальні (x, y)	Модель події / взаємодію з користувачем абстрактні (прямокутник, шлях)
Продуктивність поліпшується при зменшенні поверхні, збільшенні числа об'єктів (> 10 000) чи наявності обох умов	Продуктивність поліпшується при зменшенні числа об'єктів (<10 000), збільшенні поверхні або наявності обох умов

 

Подивіться на дані попередньої таблиці і подумайте про можливості цих технологій з точки зору існуючого програмного забезпечення. Технологія Canvas схожа на додаток Microsoft Paint , за допомогою якого можна малювати і створювати зображення , використовуючи фігури та інші засоби . Технологія SVG схожа на слайд Microsoft Office PowerPoint , який підтримує програмовану можливість додавання теми .


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



Ці сценарії допоможуть тим , хто віддає перевагу SVG або Canvas , а також тим , хто ще не визначився. У них описуються переваги і недоліки кожного підходу , так що розробники можуть зрозуміти поведінку кожної технології і вибрати відповідну для використання у своїх додатках.
невдалий вибір
Іноді зовнішні обставини вимагають вибрати технологію , що має незалежні (або майже незалежні ) функціональні можливості. При виборі між Canvas і SVG слід враховувати дві основні відмінності .
Іноді рівень знань розробника , його навички і наявні засоби відіграють вирішальну роль у виборі технології . Якщо розробник добре знайомий з API низкоуровневой графіки і має обмежені пізнання в області веб- технологій , рекомендується вибирати Canvas .
Також слід враховувати ступінь важливості продуктивності для сайтів з великим обсягом трафіку. Це необхідно для того , щоб порівняти характеристики продуктивності двох технологій . Можливо , буде потрібно розробка спеціальних можливостей , що настроюються стилів і більш детальне взаємодію з користувачами , що недоступно в Canvas . Це зовсім не означає , що технологія Сanvas , яку зазвичай вибирають для високопродуктивних середовищ , є очевидним варіантом. На наступних діаграмах показано різницю часу рендеринга для об'єктів SVG і Canvas .
У загальному випадку , у міру збільшення розміру екрану , продуктивність Canvas падає , оскільки потрібно обробити більше пікселів . У міру збільшення числа об'єктів на екрані продуктивність SVG падає , оскільки об'єкти поступово додаються в модель DOM . Ці показники не є точними і , безумовно , можуть змінюватися залежно від реалізації , платформи , використання повного апаратного прискорення графіки і швидкості роботи модуля JavaScript.


Високоякісні складні векторні документи
Високоякісні складні векторні документи підходили і будуть підходити для SVG з двох основних причин . Існує досить багато документів з високим ступенем деталізації , включаючи документи , створювані за допомогою програм автоматизованого проектування , для яких scalable частина SVG забезпечує докладне уявлення як ізольованих документів , так і документів , вбудованих в веб -сторінки. Ця технологія також підходить для високоякісного друку . Декларативний характер SVG дозволяє обробляти або створювати фігури з баз даних на стороні клієнта або сервера. Крім того , перехід у напрямку від рекомендаційного до обов'язкового характеру використання SVG підтримується на урядовому рівні через інженерних схем (патенти ) або промислових схем ( містобудівне проектування) . Ця тенденція буде продовжуватися , оскільки при виборі постачальників систем електронного документообігу органів державної влади віддають перевагу то одному постачальнику , то іншому . До цих документів відносяться наступні:
- Будівельні , інженерні та планувальні схеми
- Електричні , аеронавігаційні та схематичні креслення
- Організаційні діаграми
- Карти
- Біологічні діаграми
На наступних малюнках показано приклад деталізації , яку можна забезпечити в рамках попереднього сценарію . На першому з них показаний знімок веб -сторінки , яку можна знайти на тестовому сайті. Він містить схему дихальної системи і періодичну таблицю елементів .


На другому малюнку показана та ж схема, але збільшена в 10 разів.

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



Эти документы могут также выиграть за счет интерактивности, которая является вторым аспектом SVG и делает эти сценарии наиболее подходящими для моделей с абстрактным режимом графики.

Розширена веб- графіка
Використання SVG як формат зображення
Формат SVG також часто використовується в простих великих і невеликих зображеннях для додатків або веб- сторінок. Оскільки SVG завантажується в модель DOM або , як мінімум , розбирається перед створенням зображення , продуктивність трохи знижується. Однак це зниження є вкрай незначним в порівнянні з витратами на отрисовку веб -сторінки ( приблизно кілька мілісекунд) .
Для оцінки мережевого трафіку поговоримо про розміри файлів. Наступні два зображення ідентичні за зовнішнім виглядом , і їх розміри відрізняються всього на 1 КБ , оскільки розмір SVG - файлу трохи більше, а сам файл не стиснутий.



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



Таким чином, формат SVG є хорошим кандидатом на зміну використовуваним форматам навіть для найпростіших зображень на веб-сторінці. Отже, статичні зображення для веб-сторінок і веб-додатків розташовуються на нашому спектрі ближче до SVG.



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



Тут потрібні складні обчислення, і швидкість розрахунку залежить від продуктивності модуля JavaScript в браузері. Хоча більшість буде небезпідставно стверджувати , що машинний код все ж швидше , у міру удосконалення модулів JavaScript стає ясно , що цей розрив скорочується як у часи ассемблирования і C + + .
Існує широкий діапазон ефектів , що досягаються за рахунок трасування променів , яка зазвичай виконується у фоновому режимі в Інтернеті. Можна створювати безліч різних візуальних ефектів , включаючи формування реалістичних зображень від простої векторної графіки до застосування фільтрів , що допомагають усувати ефект червоних очей ( як у фотоапаратах ) .
Оскільки інтерфейс API Canvas дозволяє розробникам зчитувати і записувати пікселі , єдині обмеження тут пов'язані з швидкістю і уявою. Попередній приклад надано Адамом бурмистер ( Adam Burmister ) . У цьому прикладі для підтримки обчислень , необхідних для створення кінцевого зображення , використовується велика кількість бібліотек , проте основною є функція fillRect.
setPixel: function(x, y, color){

var pxW, pxH;

pxW = this.options.pixelWidth;

pxH = this.options.pixelHeight;
this.canvas.fillStyle = color.toString();

this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH);

},
З цієї причини високопродуктивна графіка, наприклад трасування променів, потрапляє в саму ліву частину спектру в якості сценарію Canvas, як показано на наступному малюнку.



Врахуйте , що автор вищезгаданого трасувальника променів зауважив , що , оскільки сценарій призначений для отримання статичного зображення , програмне забезпечення для настільних систем набагато краще підходить для великого числа операцій з плаваючою комою , необхідних для трасувальника променів.
Цікавою реалізацією маніпуляцій з пікселями є застосування фільтрів до зображень . Незважаючи на те що фільтри вже існують в Інтернеті і вимагають значної швидкості обробки , яка підвищується за рахунок апаратного прискорення графіки на більш глибокому рівні графічного конвеєра , розробники можуть експериментувати з алгоритмами , такими як виявлення краю або іншими математичними виразами.
Дані, що надходять в режимі реального часу
Технологія Canvas ідеально підходить для виведення даних реального часу при використанні більш поширених сценаріїв . Як уже згадувалося , за допомогою Canvas важко реалізувати взаємодію з користувачем . Тому подумайте про те , як можна швидко розпізнати ці сценарії. Отже , подальша дискусія відноситься до візуалізації неінтерактивних даних в режимі реального часу.
В даний час можна зробити подання даних про погоду або виключно статичним методом шляхом створення зображень на сервері через певні проміжки часу, або набагато швидше на стороні клієнта за допомогою додаткових модулів сторонніх виробників. Незважаючи на те що дослідження, проведені ECWMF , вказують на економію коштів у результаті використання SVG в порівнянні з зображеннями , що генеруються на сервері , Canvas явно є вдалим вибором для більшості графічних уявлень погодних умов ( та інших даних , які швидко змінюються в режимі реального часу) . На наступному малюнку показані погодні умови , вказані на карті .



Як видно з попереднього зображення , велика поверхня малювання необов'язкова , а число об'єктів на екрані досить високе. За допомогою API Canvas вони можуть швидко виводитися на екран і стиратися , не надаючи впливу на модель DOM . І хоча це можна зробити , наприклад , з еліпсами SVG , завантаження елементів у модель DOM і подальша зміна за допомогою анімації дається великою ціною . Якщо ви бачите в зображеннях або анімації аналітичних даних велика кількість фігур , особливо різнорідних , як правило , це означає , що необхідно використовувати технологію Canvas . Тут реальними обмеженнями є візуалізація швидко змінюються даних і регулювання швидкості процесора і модуля JavaScript. Зауважте , що за винятком вимогливого до ресурсів процесора сценарію трасування променів нормальної анімації таки можна добитися. Поняття Reasonable описує відносну анімацію , яка залежить від можливої ​​швидкості застосування JavaScript клієнтом , а також швидкості обчислень і провідної передачі сервера.
Цей сценарій демонструє основне використання .



Заміна пікселів (зелений екран)
Іншим потенційним сценарієм використання Canvas є визначення кольору у відео для заміни кольору фону другий сценою або зображенням . Як і у випадку трасування променів або фільтрів , через обмеження поточної швидкості обчислень в JavaScript будь-який реальний сценарій , що вимагає високої якості кінцевих результатів , ймовірно , буде попередньо оброблений з використанням програмного забезпечення для настільних систем. Однак оскільки тег призначений для низькорівневого читання і запису пікселів , такі сценарії , як заміна пікселів (зелений екран) взагалі неможливо реалізувати за допомогою SVG.
Код , необхідний для читання пікселів з ​​двох відеофайлів і записи в іншій відеофайл , вимагає використання двох відеозаписів , двох файлів Canvas і остаточного файлу Сanvas . Виконується покадровий захоплення відеозапису і її отрисовка в двох окремих файлах Canvas . Це дозволяє зчитувати дані в зворотному напрямку.
ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);

ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);
Отже, наступний крок полягає в отриманні дескриптора кожного виведеного зображення, щоб можна було розглянути кожен окремий піксель.
currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);

currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

Після отримання код перебирає масив пікселів зеленого екрану і виконує пошук зеленого кольору. У разі виявлення код замінює всі зелені пікселі пікселями зі сцени фону.
for (var i = 0; i < n; i++)

{

// Grab the RBG for each pixel:

r = currentFrameSource1.data[i * 4 + 0];

g = currentFrameSource1.data[i * 4 + 1];

b = currentFrameSource1.data[i * 4 + 2];

// If this seems like a green pixel replace it:

if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.

{

pixelIndex = i * 4;

currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];

currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];

currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];

currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];

}

}
На завершення масив пікселів записується в кінцевий файл Canvas.
ctxDest.putImageData(currentFrameSource1, 0, 0);
Щоб побачити код зеленого екрану цілком, перегляньте вихідний код цієї сторінки.

Сценарії об'єднання або схрещування


Наступні сценарії можна реалізувати за допомогою технології SVG або Canvas з прийнятною якістю , але одну з них можна віддати перевагу іншій.
Діаграми і графіки
Існує широкий спектр діаграм і графіків , яким потрібна векторна графіка . Можливо , для створення більшості з цих графіків доцільно використовувати технологію SVG , тому що вони мають одну з наступних трьох характеристик :
- графіки генеруються на основі існуючих даних , які легко перевести у формат XML ( SVG ) ;
- вони вимагають взаємодії з користувачем ;
- їх можна зробити краще за рахунок стилів на веб -сторінці.
Доповнимо сценарії створення високоякісних документів інтерактивними функціональними можливостями , які суттєво розширюють область застосування сценаріїв . У їх число входять:
- інтерактивні організаційні діаграми і блок- схеми;
- діаграми даних (кільцеві , гістограми , діаграми розсіювання ) ;
- інтерактивні карти (пошук маршруту) ;
- будівельні , інженерні та планувальні схеми;
- схеми розсадження для авіакомпаній або концертних залів.
Як уже згадувалося раніше , для обробки швидко змінюються даних в режимі реального часу краще всього використовувати Canvas (в основному через швидкості).


1.5 Двомірні ігри
Під казуальними іграми тут маються на увазі прості двомірні ігри для Інтернету. Технологію (тобто Canvas або SVG ) вибирає розробник. Оскільки історично бібліотеки ігор використовували API низкоуровневой графіки , спостерігатиметься тенденція до зміщення в бік .
Коли інші компоненти бібліотеки розташовуються значно глибше , ніж шар графіки ( наприклад , популярні фізичні модулі ) , графіка стає деталлю реалізації . Геометричні компоненти графіків , такі як кордони , швидкості , розміри і розташування передаються модулям , які згодом реагують , генеруючи значення швидкості , зіткнення та розташування. Графіка займає найвище становище в стек.
Концепцію графіки , не залежну від логіки гри можна побачити у двох іграх , розроблених одним і тим же автором , який хотів продемонструвати використання технологій
Хоча логіка гри і демонстрації відрізняється , фізичний модуль в обох іграх стежить за позиціями , зіткненнями , швидкостями і іншими фізичними параметрами компонентів гри.
Що стосується canvas - pinball , тут настроюється диспетчер анімації верхнього рівня перемальовує сцену за допомогою послідовності API Canvas.
if (animationsInProgress) {

ctx.save();

ctx.lineWidth = 2.0;

ctx.beginPath();

ctx.moveTo(89, 322);

ctx.lineTo(101, 295);

.

.

.

ctx.stroke();

ctx.restore();

ctx.moveTo(tVp.x, tVp.y);

}
Якщо мова йде про гру SVG Dice, то настроюється диспетчер анімації верхнього рівня використовує перетворення в групах для переміщення існуючої графіки на екрані за допомогою DOM.
if (animationsInProgress)

{

this.rotation += (this.circleBody.m_linearVelocity.x/20);

var transFormString = "translate(" +

Math.round(this.circleBody.m_position.x) + "," +

Math.round(this.circleBody.m_position.y) + ") scale (" +

this.scale.toString() + ") rotate(" +

Math.round(this.rotation).toString() + "," +

Math.round(this.xTrans).toString() + "," +

Math.round(this.yTrans).toString() + ")";

this.die2.setAttribute("transform", transFormString);

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


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


Проектування користувальницького інтерфейсу
Кілька років тому вважалося , що для проектування користувальницького інтерфейсу необхідно використовувати технологію SVG. Вимоги відповідають SVG. Насправді , принаймні один інтерфейс операційної системи Linux створений повністю на базі SVG. Елементи управління зі стандартного внутрішнього набору , такі як повзунки , прапорці , кнопки з округленими кутами і інші нестандартні компоненти , досить просто реалізувати за допомогою векторної графіки. Однак , завдяки недавнім і майбутнім нововведенням в CSS , включаючи закруглені кути , градієнти , фільтри і події - покажчики , переважна більшість цих елементів управління можуть бути розроблені за допомогою стандартних конструкцій HTML для документів з рамкової моделі . Інші елементи керування (особливо після недавнього появи моделей " сітка CSS" і " адаптується блок CSS" ) скоріше орієнтовані на елементи HTML , принаймні , застосовуються як контейнерів.
Тут наведено приклад складної , керованої даними діаграми . Незважаючи на те що вихідні дані спроектовано не дуже вдало , кінцевий результат представлений добре. Загальновідомо , що елементи управління графіками та діаграмами складно розробляти , проте сторонні виробники , як і корпорація Майкрософт , дуже процвітали в цьому. Це знижує навантаження на розробників , надаючи абстракції для прив'язки даних на стороні клієнта або на стороні сервера , але на сьогоднішній день для Інтернету рендеринг на стороні клієнта ще досить статичний або вимагає установки додаткових модулів . У прикладі нижче розширене взаємодія з користувачем забезпечувалося за рахунок багатих можливостей SVG. Незалежно від того коду , який буде наданий клієнтові ( в майбутньому можливо більш декларативне взаємодія) , діаграма відображається за допомогою двох ключових компонентів. Оточення і дані Оточення або фон діаграми є базовою статичної SVG :




milliseconds

Далі кожна окрема точка даних або доставляється клієнту і динамічно обробляється, або формується на сервері:
{Page}.svg





6.1%
ТЕХНІЧНЕ ЗАВДАННЯ

1. ВВЕДЕННЯ

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

1.2 ПІДСТАВА ДЛЯ РОЗРОБКИ

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

1.3 ВИМОГИ ДО ПРОГРАМИ АБО ПРОГРАМНОГО ВИРОБУ

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

1. Система повинна забезпечувати можливість виконання наступних функцій:

• 
  Можливість маніпулювати елементами;
  
• 
  Виведення координат на екран;
  
• 
  Можливість очищення вікна canvas.
  

2. Для цих завдань мають бути реалізовані:

• 
  Алгоритм, зчитування координат з файлу;
  
• 
  Iмпорт і експорт сіток;
  
• 
  Система авторизації Yii;
  
• 
  Сторінка для додавання сіток на сайт;
  
• 
  Сторінка управління доступними сітками.
  

3. Вимоги до інформаційної і програмної сумісності:

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