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

Предмет:

Тип роботи:

Бакалаврська робота

К-сть сторінок:

Мова:

Українська

Оцінка:

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

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

Заміна пікселів (зелений екран) Іншим потенційним сценарієм використання Canvas є визначення кольору у відео для заміни кольору фону другий сценою або зображенням. Як і у випадку трасування променів або фільтрів, через обмеження поточної швидкості обчислень в JavaScript будь-який реальний сценарій, що вимагає високої якості кінцевих результатів, ймовірно, буде попередньо оброблений з використанням програмного забезпечення для настільних систем. Однак оскільки тег <canvas> призначений для низькорівневого читання і запису пікселів, такі сценарії, як заміна пікселів (зелений екран) взагалі неможливо реалізувати за допомогою 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) ;

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

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

Наступні сценарії можна реалізувати за допомогою технології SVG або Canvas з прийнятною якістю, але одну з них можна віддати перевагу іншій.

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

1.5. Двомірні ігри

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