HTML5 Framework для пользовательского редактора продуктов

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

Основные функции, которые необходимо реализовать:

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

Фреймворки, которые я искал до сих пор:

капучино

Выглядит многообещающе, и проекты, которые были сделаны с его помощью, покрывают 90% нужного мне функционала. Я не уверен насчет ObjectiveJ, хотя...

росток

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

мольберты

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

Каково ваше мнение об этих фреймворках и подходят ли они для проекта? Любые другие, которые я пропустил? Любые предложения действительно приветствуются, чтобы помочь мне выбрать правильный инструмент для работы.

Спасибо.


html html5-canvas easeljs cappuccino sproutcore
person digitaljerry    schedule 12.10.2012    source источник
comment
Если вы понимаете Javascript и объектно-ориентированное программирование, вы можете изучить Objective-J за несколько часов.   -  person Me1000    schedule 12.10.2012

Ответы (1)


arrow_upward
1
arrow_downward

Для вашей функциональности масштабирования я нашел тот же вопрос здесь

и для предварительного просмотра png вашего изображения вы можете сделать что-то подобное

var canvas = document.getElementById("canvas");
var img    = canvas.toDataURL("image/png");
//here you got the png image show just create an element and show this preview there
document.write('<img src="'+img+'"/>');
person Vijay    schedule 12.10.2012
comment
Спасибо, я не знал, что вы можете создавать .png вот так. Идеально. - person digitaljerry; 15.10.2012