Оценок пока нет Графический редактор на JavaScript. Часть 1. Введение

Данный цикл статей будет относится к проектированию простого графического редактора на основе клиентского языка JavaScript и серверного языка PHP. Графический редактор будет иметь возможность создавать простейшие примитивы: линия, эллипс, прямоугольник, многоугольник. Опишем возможность добавления, редактирования и удаления примитивов из текстового файла. Прорисовка примитивов будет производиться средствами HTML5 Canvas. HTML5 интегрирован с языком JavaScript и позволяет нам напрямую использовать API Canvas.

1. Клиентская часть на JavaScript

Клиентская часть, как известно, выполняется в браузера удаленного пользователя и для того, чтобы пользователь имел возможность редактировать файл на сервере необходимо будет иметь постоянную связь с PHP скриптом, для передачи параметров интерактивного редактирования примитива. Для этого будем использовать технологию ассинхроной связи с сервером AJAX. Для кроссбраузерной совместимости будем сразу использовать какую-нибудь библиотеку JavaScript, чтобы не отвлекаться на ненужные приемы совместимости и лучщим решением будет jQuery.

2. Серверная часть на PHP

Серверная часть будет написана на PHP. Необходимость в использовании PHP обусловлено тем, что JavaScript не имеет возможности работать с файлами: записывать, удалять, редактировать… Поэтому использование серверного языка — это одна из необходимостей для создания и редактирования графического файла, в котором будут храниться наши данные.

3. Расширение файла

Для того, чтобы сохранить наши примитивы для передачи между пользователями будем использовать обычный текстовый файл с расширением *.sgf(Simple Graphic Format). Название расширения не играет роли, можно любое, которое угодно вам и от этого файл не перестает быть текстовым. Другое дело — это , если бы мы использовали бинарный файл с 16-ричными значениями, но нас сейчас интересует первый вариант в виду легкости разработки и быстроты реализации.

4. Стрктура файла

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

Пожалуйста, оцените материал

WebSofter

Web - технологии