Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Запорожский национальный университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Diplom (1).doc

Скачиваний:

Добавлен:

07.02.2016

Размер:

1.01 Mб

Скачать

☆

<<< < Предыдущая 1 23 / 73 4 5 6 7 > Следующая >>>

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

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

<!DOCTYPE html >

<head>

</style>

</script>

</head>

<body>

</body>

</html>

SVG

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

Елементи Незважаючи на те що зовнішня програма-оболонка <svg> підходить для рамкової моделі HTML, внутрішня модель непридатна в більшості випадків, оскільки вектори не обмежуються простими полями. Ця незастосовність вимагає розширення атрибутів в SVG для забезпечення більш широких можливостей графіки. Приклади :

</svg>

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

Елемент <rect> підтримується в моделі DOM документа HTML. Для застосування стилів до елементів SVG , як і до інших елементів HTML , можна використовувати різні способи . У наступному прикладі показана таблиця . стилі Розробники можуть виявити, що атрибути їм вже знайомі. SVG має як звичайні атрибути , так і атрибути подання. На даному етапі це розмежування може здатися довільним , проте ключовим моментом є те , що до атрибутів подання можна застосовувати стилі відповідно з правилами використання стилів CSS. Чотири прямокутника заливаються різними способами.

Перший приклад показує , що відсутність атрибута кольору надає видимий ефект на графічний об'єкт. У цьому випадку в якості кольору за замовчуванням використовується чорний . У другому прикладі для заливки прямокутника використовується клас 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

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

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

Після цього можна використовувати інтерфейси API <canvas>, які мають традиційні двомірні низькорівневі бібліотеки для малювання зображень або векторів. Для маніпуляцій з графічними об'єктами в 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, який підтримує команди, аналогічні командам елемента <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 в одному елементі тега <canvas> і потім перенаправити цю команду фігурі , що знаходиться в структурі пам'яті. Для більш складних елементів 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 Сценарії використання <canvas> і SVG У цьому розділі описуються переваги та обмеження обох технологій , а також наведені загальні принципи, що дозволяють зробити вибір на користь однієї з технологій . Слід зазначити , що як за допомогою SVG , так і за допомогою <canvas> можна домогтися практично однакових результатів з ідентичними функціональними можливостями. Важливо виділити особливі сценарії , в яких <canvas> надає значні переваги в порівнянні з 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 , що розташовується на іншій стороні спектра , можна порівняти з швидким малюванням , що не вимагає зберігати дані про намальованих об'єктах. Існує ряд сценаріїв обробки даних реального часу , де краще всього використовувати теги <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> .

Заміна пікселів (зелений екран) Іншим потенційним сценарієм використання 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);

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

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> . Коли інші компоненти бібліотеки розташовуються значно глибше , ніж шар графіки ( наприклад , популярні фізичні модулі ) , графіка стає деталлю реалізації . Геометричні компоненти графіків , такі як кордони , швидкості , розміри і розташування передаються модулям , які згодом реагують , генеруючи значення швидкості , зіткнення та розташування. Графіка займає найвище становище в стек. Концепцію графіки , не залежну від логіки гри можна побачити у двох іграх , розроблених одним і тим же автором , який хотів продемонструвати використання технологій <svg> і <canvas> : SVG - oids і canvas - pinball . Більш вдалий приклад незалежності рівня графіки від ігрового модуля можна побачити , порівнявши canvas - pinball з SVG - Dice , оскільки в обох випадках застосовується один і той же фізичний модуль . Хоча логіка гри і демонстрації відрізняється , фізичний модуль в обох іграх стежить за позиціями , зіткненнями , швидкостями і іншими фізичними параметрами компонентів гри. Що стосується 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 :

<text id="tiptxt" x="40" y="120" font-size="12" font-family="Arial" fill="#ffffff" visibility="hidden">milliseconds</text>

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

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

<<< < Предыдущая 1 23 / 73 4 5 6 7 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
09.07.20195.24 Mб6derzhavnij_vischij_navchal_nij_zaklad.doc
#
07.02.201643.84 Кб6Derzhavny_vischy_navchalny_zaklad_1.docx
#
14.08.201977.55 Кб3Derzh_i_pravo_frankiv.docx
#
26.11.2019169.98 Кб1Deyaky pitannya po transplantacii.doc
#
26.11.201989.09 Кб0Deyaky pitannya pro evtanaziyu.doc
#
07.02.20161.01 Mб13Diplom (1).doc
#
15.04.2019177.66 Кб2Diplom_2011.doc
#
04.12.20182.64 Mб18Di_math.doc
#
10.09.2019282.62 Кб4DKI_VikiPedPs.doc
#
07.09.201927.82 Кб1Dlya_Pivovar_VP_u_bankakh.docx
#
07.02.201639.48 Кб21Dokument_Microsoft_Office_Word.docx