Рисование API

Сохранение данных рисунка

На примере рассмотренного приложения становится ясно, что сохранение рисунков в приложении заключается просто в сохранении массива данных в общем объекте.

Мы создадим интерфейс, содержащий все локально сохраненные изображения, и затем обеспечим возможность либо рисования нового рисунка, либо просмотра старого.

Приведем структуру того, что мы хотим сделать:

Главная страница:

Возможности:

Панель, содержащая список рисунков из sharedObject с полосой прокрутки.

Опции:

Выбрать имеющийся рисунок - перейти к странице перерисовки.

Создать новый рисунок - перейти к странице создания.

Страница перерисовки:

Возможности:

Перерисовка прежнего рисунка.

Опции:

Вернуться на главную страницу.

Страница создания:

Возможности:

Рисование мышью.

Опции:

Сохранить текущий рисунок - сохранить рисунок в общем объекте - перейти на главную страницу.

Вернуться - возврат на главную страницу.

У нас есть три основных задачи: меню, рисование и перерисовка. Мы можем предположить, какие функции нам потребуются для создания приложения:

Полнофункциональное приложение рисования

Перейдем к работе над полнофункциональным приложением рисования и сохранения рисунков.

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

   
   
2. Инстанс кнопки Save назовите saverButton с помощью Property inspector, а инстанс кнопки Return - backButton.
3. Создайте символ фильма и назовите его listingsPanel. В фильме создайте новый слой с именем textfield и добавьте динамическое текстовое поле на этот слой. С помощью Property inspector назовите текстовое поле lista.
   

   
   
4. Создайте новый слой с именем background и нарисуйте прямоугольник (светло-серого цвета, #F5F5F5) значительно больший динамического текстового поля, которое вы только что создали. Под ним я нарисовал другой прямоугольник, который намного темнее первого (#E8E8E8), чтобы выделить его. Затем перетащите слой background под слой textfield.
   

   
   
5. Все еще находясь в фильме listingsPanel, создайте слой с именем new под слоем textField. Внутри слоя new создайте символ кнопки и присвойте ему имя инстанса newButton с помощью Property inspector. Как видите, мы просто добавили необходимый текст в нашу кнопку и поместили его внизу динамического текстового поля.
   

   
   
6. Создайте два новых слоя с именами upscroll и downscroll. Создайте символ кнопок прокрутки вверх и вниз. Я просто добавил текстовые поля с символами "больше" и "меньше". Разместите символ прокрутки вверх на слое upscroll и с помощью Property inspector дайте ему имя инстанса upScroll. Расположите второй символ кнопки на слое downscroll и назовите его инстанс именем downScroll. Здесь вполне понятно, какие действия выполняют эти кнопки. Мы расположили наши кнопки под текстовым полем слева от кнопки new.
   

   
   

   Можно было бы использовать для этого программный компонент прокрутки, но компоненты мы будем рассматривать в следующей лекции и пока не будем забегать вперед. Создание фильма почти завершено, осталось только добавить в него заголовок. Мы создали новый слой с именем title и добавили статическое текстовое поле со словами "List of drawings".