2.4 Программная реализация расширения «PaintPad» , что также надо учитывать, 2.4.1 Описание проектного решения

Целью данной работы является разработка простейшего графического редактора с помощью JavaScript и графической библиотеки canvas, с использованием ее графических методов.

Реализованный редактор позволяет работу сайта заметок входит и будет входить при дальнейшей разработке:

, что также надо учитывать,

1) создание векторных (круга, квадрата, квадрата, ромба) их различные (растягивание) в прямоугольник и со скруглёнными соответственно. Возможно цвета фигур ручки по шестнадцатеричной системы HEX , толщины образа;

2) рисунков помощью линий (кисти);

вывод на редактируемый рисунок;

, что также надо учитывать,

3) стирание нарисованной области холста canvas (ластик). Объектно-ориентированный анализ проектирование как сверху вниз, как вверх, можно назвать «возвратным что разработки с постепенной различных, менее, между собой и системе целом. Созданная система процессе деятельности быть представлена состояний, которые те или действия. В можно выделить начальное состояние конечное, завершающее состояние.

4) выбрана толщина линии кисти;

, что также надо учитывать,

5) некоторый рисования завершен, необходимо сохранить рисунок;

6) сохранен, рисование;

7) или рисован выход расширения;

8) или новый нарисованный сохранён, работы;

9) другого инструмента, редактирование;

10) рисунок редактирование;

11) тип заполнения;

Начальным является создание чистой области рисования. Холст по средствам canvas в файле и с на исполняющий JavaScript:

<canvas width="640" height="480"></canvas>

<script src="main.js"></script>.

, что также надо учитывать,

, что также надо учитывать,

Когда область создана, можно осуществлять его редактирование, сохранение под новым именем (имя файла задается автоматически) либо в уже созданном файле. Для редактирования разработан ряд инструментов, осуществляющих различные функции:

1) карандаш;

2) ластик;

3) прямоугольников;

4) окружностей;

5) линий;

6) ввод текста;

Существуют также инструмент выбора цвета инструмента.

2.5 Разработка расширения «PaintPad»

Типичное расширение для Chrome состоит из файла манифеста и некоторой комбинации из фоновой страницы, страниц пользовательского интерфейса и сценариев (см. рисунок 6).

Все начинается с файла манифеста с именем manifest.json. Этот файл содержит информацию, необходимую Chrome для того, чтобы загрузить расширение – заголовок, описание, необходимые разрешения, ярлык и т.п.

Файл скрипта (main.js) – содержит функции необходимые для работы рисования.

Фоновая страница (popup.html) – это страница, которая запускается и выполняется в своем собственном контексте popup, независимо от того, сколько вкладок или окон открыто. У расширения может быть только одна фоновая страница. Она нужна для расширений, где должен выполняться процесс, охватывающий все страницы Chrome.

Страницы пользовательского интерфейса (UI Pages) – это любые страницы, которые расширение представляет пользователю. Это может быть всплывающее окно, страница свойств, страница в составе расширения или страница, заменяющая страницу Chrome по умолчанию (например, страница новой вкладки).

Сценарии – это файлы JavaScript, которые внедряются в Web-страницы для взаимодействия с ними. Сценарии выполняются в собственном изолированном контексте, но могут получать доступ к модели DOM страницы. Сценарии могут устанавливать связь с другими страницами расширения с помощью специального API передачи сообщений.

Для PaintPad будет использоваться файл манифеста, JavaScript-файл с некоторыми базовыми функциями (которые должны быть переносимыми), фоновую страницу, страницу свойств, всплывающее окно popup, таблицу стилей CSS задающий оформление и несколько значков. Действующее расширение PaintPad можно загрузить из интернет-магазина Chrome, либо с жестого диска компьютера для личного пользования, чтобы видеть его в действии. Блок-схема расширения имеет такой вид (см. рисунок 15)

Рисунок 15 – Блок-схема расширения Chrome

Для в консоли создается пустой (см. рисунок 16) который хранится дисковом пространстве компьютера где находятся расширения:

Рисунок 16 – Создание репозитория

, что также надо учитывать,

, что также надо учитывать,

, что также надо учитывать,

В корневой репозитория под «paintpad» хранится папка «addon» в ней находятся файлы необходимые для работы расширения. Файл «main.js» – главный скрипт для расширения с функциями нужными для рисования на холсте canvas так же в этом файле присутствуют области для регулировки размера. Файл “popup.html» – файл где задается холст для рисования canvas так же этом для и очистки Файл «style.css» задает внешний стиль расширению, такие как фон стиль текста и его размер стиль кнопок подложку для и холста.

Программа из основного окна с холстом canvas с заданным установленным в HTML разметки в свойстве: id width height="480" Холст сост точек-пикселей. Положение характеризуется и (Y) координатами. верхний (0, Координаты возрастают вниз правой точки холста от холста.

рисования:

1) painter класс «кисть при цвета и изображения;

2) eraser к «ластик», будет использоваться для стирания где кистью.

, что также надо учитывать,

, что также надо учитывать,

js, в программе. Интерфейс содержит форм где вводятся параметры компонента кисть и ластик, одна этих форм в себе для ввода цветов в формате HEX-кода, хэш кода При кнопку предложенных, переменных присваивается значение, котором слушателем listener. При кнопки мыши начинается прорисовка объекта, мыши в с изменением координат x, y указателя мыши, кнопку отпускают прорисовка заканчивается.

form происходит визуальные активные с ввода клавиатуры.

код в файле «main.js» и все функции рисования на холсте canvas внутри этого js файла.

Функция painter определяет положение координат курсора для рисования и его цвет, по умолчанию установлен черный цвет (см. рисунок 17)

Рисунок 17 – Параметры функции painter

, что также надо учитывать,

Для сохранения и холста предназначены кнопки «Сохранить» «Очистить» находящиеся на панели инструментов под холстом, вызываемые в расширении браузера Chrome для Windows, Mac X и Linux щелчку левой кнопкой является стандартной удобной Нажатие кнопку «Сохранить» вызывает функцию saveCanvas(), сохраняет полученное изображение. Сохранение холста различного множества Во-первых нужно определить, образом изображения.

Для этой задачи холст canvas три подхода:

1. URL-данных. подхода холста трансформируется файл изображения, после переводится последовательность как URL Это получить компактный аккуратный данных из холста Этот будет в расширении.

2. Использование getImageData(). Использование метода позволяет получать «сырые» пиксельные данные которыми после сохранения можно производить разного рода манипуляции.

3. , что также надо учитывать,

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

, что также надо учитывать,

Нажатие кнопки «Очистить» вызывает функцию clearCanvas(), полностью очищает холста с метода контекста clearRect().

Описание функций:

, что также надо учитывать,

, что также надо учитывать,

, что также надо учитывать,

– Функция сохранения метод window.open(canvas.toDataURL("image/png"),"mywindow"); инструмент Основным инструментом работы динамических изменений на странице является DOM Object Model) – объектная модель используемая для XML/HTML-документов. Это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов. При нажатии по кнопке «Сохранить» просходит открытие новой вкладки в браузере с готовым изображением и сохраняется стандартными средствами по вызову функции «Сохранить изображение как» из контекстного меню.

– Функция сохранения (см. рисунок 18):

унок 18 – Код функции сохранения

– Функция очистки clearRect (см. рисунок 19):

унок 19 – Код функции очистки

выводится на экран помощью специального окна popup (см. рисунок 20).

унок 20 – Окно popup в браузере с расширением

Всё больше и больше сети начинает появляться веб-ресурсы которые используют всплывающие окна popup. В пример можно привести социальные сети. Всплывающие окна используются для реализации пользовательского интерфейса в веб-приложениях. Для создания используется технология JavaScript, но возможны другие способы реализации Всплывающие окна имеют широкий диапазон применений, от полезного для потребителя программного обеспечения до злоумышленного.

Наиболее широкое применение всплывающие окна приобрели для размещения рекламных сообщений и расширениях для браузеров в сети Интернет Содержащие рекламу всплывающие окна открываются на переднем (англ pop-up) или на заднем фоне (англ. Последнее является более изощрённым приёмом распространения нежелательных для пользователя рекламных сообщений, поскольку не привлекает внимание пользователя до тех пор пока активное окно не будет закрыто и затрудняет возможность определения источника появления всплывающего окна.

Всплывающие окна могут отображать не только браузеры, но и другие программы Некоторые из них все же запускают для этого тот или иной браузер Так поступают многие шпионские программы, также программы поддерживаемые за счёт рекламы хотя граница между первыми вторыми не всегда очевидна.

, что также надо учитывать,

Ещё один вид всплывающих окон может пересылаться помощью службы отправки сообщений в операционных системах MS Windows. Несмотря на похожее имя её не следует путать с клиентами служб мгновенных сообщений Messenger или Windows Live Подобные всплывающие окна появляются в виде диалогового окна с текстовым сообщением или картинкой, обычно содержащим ссылку на веб-сайт Служба отправки сообщений была отключена во втором пакете обновлений (Service 2) для Windows XP.

Выводы по главе 2

Таким образом, рассмотрев практический аспект использования HTML, CSS, JavaScript и основы работы с всплывающими окнами «popup» для создания расширения «PaintPad» для браузера Google Chrome были выявлены и рассмотрены особенности разработки для браузера, такие как:

1. , что также надо учитывать,

   , что также надо учитывать,

   в Chrome приложениях и расширениях практически без дополнительных усилий реализуется синхронизация между экземплярами приложения на разных компьютерах;

2. , что также надо учитывать,

   управление безопасностью. В Chrome устроено иначе, в других браузерах и больше походит на безопасности в

Было выявленно что основным языком программирования расширений для браузера является прототипно-ориентированный сценарный языка программирования JavaScript.