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

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

 

 

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

Мова 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 для забезпечення більш широких можливостей графіки. Приклади:

Примітка. Для перегляду багатьох прикладів даного розділу потрібно браузер (такий як 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, є модель подій. Подивіться на