Архив: HTML 5 Canvas редактор

Описание

Я ищу человека, который мог бы помочь нам разработать редактор с помощью HTML 5 Canvas. Смотрите скриншоты, чтобы лучше понять, что будем делать. Смотрите мои комментарии для более подробной информации здесь https://projects.invisionapp.com/share/KAPJPBKT83H#/screens/336148803/comments.



Ну и нужно реализовать следующие функции:

1. блоки.

- типы блоков. динамическое количество типов блоков. в начале у нас будет только 2 типа, «Message» (1) и «Action» (2), но конструктор должен быть легко расширяемым, так как завтра мы можем решить еще несколько типов блоков.

- цвета (3). цвета зависят от типа блока (сообщение, действие и т. д.).

- блоки должны иметь заголовки (5).

- блоки могут иметь значки в левом верхнем углу (6).

- блоки могут иметь цветные заголовки. единственный тип заголовков у нас сейчас, это «Starting step». Заголовки могут быть перемещены путем перетаскивания. (7)

- блоки могут быть удалены или продублированы с помощью кнопок «дублировать» и «удалить». кнопки отображаются при наведении курсора мыши (8).



1.2. блоки "Message"

- блоки сообщений могут иметь много блоков сообщений (9).

- блоки сообщений могут иметь кнопки. кнопки всегда заканчивают блок сообщения. это означает, что у нас не может быть никаких других элементов после кнопок (4).

- кнопки всегда должны приводить к новому блоку и должны располагаться в конце блока.

- блоки сообщений могут иметь элемент «автоматически продолжить» в конце элементов блока (10).



1.2. блоки "Action"

Пользователи-дизайнеры используют блоки действий для добавления элементов действий.

- блоки действий могут иметь любое количество элементов действий действия (11).

- элементы действий разделены линией, похожей на (12).

- элементы действий могут иметь значки слева (13).



2. соединения.

Есть 2 типа соединений.

- соединения, которые начинаются с кнопки (14).

- «автоматически продолжить» соединения (15).

- соединения соединяют блоки. отношение много ко многим. блок может начать много

соединения и многие соединения могут привести к блоку (16).





3. дизайнер

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

- увеличить. пользователи должны иметь возможность увеличивать и уменьшать изображение с помощью кнопок «+» и «-» и с помощью мыши (17).

- автоматическая организация. У пользователей должна быть возможность упорядочить блоки, нажав кнопку «Автоматическое расположение» (18).

- кнопки «+», «-» и «автоматическое расположение» будут отцентрированы вправо.



4. состояние

- редактор должен читать / записывать состояние из переменной.

Категория

Веб-программирование