GD Star Rating
loading...

Коданы, есть необходимость создать редактор mockup-ов + поддержка переходов между этими mockup-ми. Ну грубо можно сказать что нужен Balsamiq только на html5+javascript. Из функций надо: layers, group/ungroup objects, resize group of objects, snap to grid/object, работа с примитивами(прямоугольник, кусок текста, картинка), в дальнейшем может понадобится layout manager.

Рассматриваем 2 варианта:
1) Колбасить всё jQuery+jQuery.UI(resizable/selectable/dr aggable) + svg(для разной графики)
2) Использовать canvas и всё писать с нуля ну или не совсем с нуля, а взять например fabric.js или paper.js

Первый вроде писать меньше, типа уже куча всего сделано в jQuery.UI, типа всякие drag’n’drop, изменения размеров, выбор объекта.

Во втором варианте больше свободы для манёвров, но писать фактически всё с нуля.

Какой вариант выбрать? Плюсы/минусы?

p.s. На IE7/8/9 можем забить.

Tagged with →  

15 Responses to создать редактор mockup-ов

  1. SukEbb:

    Начать с 1, и по мере формирования требований переписывать узкие места, не?

  2. AmtSport:

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

  3. Niken:

    Ну через 2 года похоже второй вариант.

  4. AmtSport:

    ну и ответ очевиден. Какой смысл сейчас всё делать на jquery, если потом всё равно на канвасы переписывать. Разве только у проект-менеджера чуйка сработает насчёт того, что это “потом” никогда может не наступить, или хоть какой-то результат нужен уже вчера. В остальных случаях не вижу необходимости разрабатывать первый вариант.

  5. Xuaef:

    на самом деле канвас – это жутко неудобно и тормозняво. Самый лучший вариант – в канвасе рендерить текстуры и потом накладывать их фоном в дивы.

  6. Niken:

    А можно подробней, в чём он неудобный и тормозявый?

  7. Xuaef:

    применительно к твоему проекту основной косяк в том, что canvas – это однослойная растровая картинка. То есть возьми пеинт, зарисуй фон сердечками, нарисуй посреди экрана небольшой хуй волосатый и попробуй его переместить теперь на 20 пикселей влево – и ничего не выйдет. Либо у тебя останется дырка на бывшем месте хуя, либо тебе заново всё перерисовывать.

    В случае канваса тоже самое. В случае HTML – обо всём уже подумали, причём работу делает высокооптимизированный нативный код + аппаратное ускорение, битблиттинг и прочие страшные слова. На деле получаем, что канвас штука бесполезная и вредная в данном юзкейсе. Были какие-то немцы, которые первыми придумали сделать крутой изометрический движок для игр на канвасе для всяких фермочек, в итоге переписали всё на обычный HTML + JS, а в канве лишь рендерили спец-эффекты и прочие динамические анимированные плюшки, которые затем клали фончиками в дивы.

    Вобщем, я тоже такой движок делал. Забей на канвас, точно говорю. Тебе в нём рендерить вообще нечего. Если хочется всяких прикольных тянучек динамических, то клади SVG фоном.

  8. Niken:

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

    Больше всего чего я боюсь, это как раз борьбы с html+css, вместо того чтобы делать то, что мне надо.

    Движок где-нибудь глянуть можно?

  9. Xuaef:

    я забыл название, лол, но гугол выдаёт тонны всяких – сейчас модно стало.

    Класть канвасы можно, но это ничем не отличается от накладывания дивов.

  10. AmtSport:

    ну как бы естественно, что никто не будет с нуля делать перерисовку всего именно в канвасе. Я бы тогда усомнился в умственных способностях реализатора. Понятное дело, что канвасы нужны для эффектов, которые невозможно сделать иными методами и для сборки всех слоёв в одну картинку, не более. А вот что слои можно собирать дивами, вместо накладывания на один канвас – это хорошая идея. Правда при накладывании в один канвас там есть ещё эффекты накладывания, чего нет в дивах.

  11. OnsPhone:

    Вся разница, по-моему, и будет в ядре браузера, как он пересчитывает css и канву. Логичнее использовать канву, но css может оказаться неожиданно быстрее, особенно в планшетах, например. К сожалению, у любого подхода есть свои +/ – и оценивать под эту конкретную задачу на всех нужных клиентах придётся, как всегда, опытным путём. Автору одна рекомендация – довольствоваться наименьшим.

  12. Niken:

    Ну я типа про твой движок спрашивал. Не довёл до ума? (:

  13. Xuaef:

    за него перестали платить, я перестал делать.

  14. XibaTa:

    взять pencil, портировать xul-специфику на обычный html

Добавить комментарий