LINUX.ORG.RU

Графика в HTML5 и gimp.


0

1

Допустим, я хочу сделать свой собственный нестандартный GUI на javascript. Там будут кнопки, фоновая картинка, текст и изменяемые картинки. Кнопки нажимаются. Фон, понятно, растягивается на всё окно браузера. А остальное поверх него рисуется отдельными мелкими картинками (спрайтами). Для каждого элемента изображения может быть более одного спрайта-фазы и рисуется только нужное (кнопка нажата/отжата). Вопрос, как их позиционировать. Какие варианты я вижу:

1) всё сделать с размер окна браузера (пока технические мелочи, мол у всех окна разные — опустим). в изображениях накладываемых поверх фона всё прозрачное, кроме того места, где кнопка нарисована, например. события привязываются через image map.

2) делается для фоновой картинки image map в котором определяются прямоугольные области, в которые вставляются более мелкие спрайты из отдельных картинок.

3) аналогично с п.2, кроме того спрайты не отдельными файлами, а упакованы плотно в один файл, для извлечения спрайта из которого используется ещё один image map.

Больше ничего в голову не приходит. Ну кроме забить координаты прямо в исходник...

Ещё вопрос удобства рисования картинок. Пункт 1 самый удобный (можно в gimp всё в разных слоях сделать и тут же смотреть — WYSWYG). Пункт 2 тоже WYSWIG, но в слоях с мелкими картинками размер слоя меньше размера изображения (при экспорте подгоняется под размер слоя), нужно нудно вручную image map делать, причём точно пиксель-в-пиксель всё равно не совпадёт и позиционирование «спрайтов» будет слегка не точное. Пункт 3 нифига не WYSWYG, зато грузится быстрей.

Как бы ещё автоматом от п.1 или п.2 перейти к п.3...


Я мало чего понял, но по-моему ты строишь дом из костылей. Бери стандартные элементы и украшай их цссом. Спрайты можно прикрутить через background-image и крутить их меняя offset'ы. В принципе можно даже без яваскрипта обойтись.

Kalashnikov ★★★ ()
Ответ на: комментарий от Kalashnikov

Стандартные элементы с цссом не позволяют круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка. Или хотя бы треугольные кнопки прижатые друг к другу. Ибо bounding box прямоугольный и всё на нём основано. И собственно размещение на странице произвольное не позволяют (без position:absolute). А это размещение должен как-то дизайнер нарисовать. И он в цсс ничего не понимает.

fk0 ()

Не бери image map, намучаешься. Рисуй на канвасе сразу.

anonymous ()

Поубивал бы всех этих любителей «фоновых картинок»!

В html5 должны быть только одни картинки — фотографии. А все остальное делается без долбаных картинок!

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от anonymous

На чём рисовать — дело десятое. Для того, чтоб маленькую картинку нарисовать поверх большой в нужном месте нужно знать координаты. Вот они в image map. И то же самое с кликами мышой. Нажимаемый регион всё равно задавать руками, тут никуда не денешься (в картинке же могут быть и нажимаемая и не нажимаемая части).

Так что не понял реплики на счёт «рисовать на канвасе сразу».

И сразу вопрос. А как лучше рисовать? Вижу варианты:

1) image style=«position:absolute...» и тут javascript достаёт координаты из image map (который удобно подготавливать в gimp) и рисует куда надо... снизу фон (index у него меньше), сверху картинки, совсем сверху пустая картинка с image map для нажатий мышью.

2) примерно то же самое на canvas. только сразу приходит в голову — а зачем вообще canvas нужен? из графики ничего кроме готовых изображений не будет (кроме того, они могут быть анимированные гифы — их канвас нормально покажет?)

Фоновые картинки — это стильно модно и современно. Интерфейс браузера как есть — крайняя степень УГ. Тем более, что у всех по-разному это не всегда хорошо. Речь о конкретном «интерактивном приложении», а не классичекой веб-странице.

fk0 ()
Ответ на: комментарий от fk0

Добавляй [Хочется странного] тогда. image map - тухлая затея, бери канвас или свг.

А это размещение должен как-то дизайнер нарисовать.

Не должен, это должен делать верстальщик.

Kalashnikov ★★★ ()
Ответ на: комментарий от Eddy_Em

совместимость со старым говном тоже нужна.

dk- ()
Ответ на: комментарий от Kalashnikov

«бери канвас». Ну вот взял. А верстальщик координаты руками что ли в javascript впишет??? И потом как он это должен, если он не знает что эта левая верхняя кнопка, а не нижняя правая, например. И что она должна быть именно здесь, согласно замыслу.

fk0 ()
Ответ на: комментарий от fk0

Я к тому, что нужна какая-то система хранения координат. Если не image map — то что?

fk0 ()
Ответ на: комментарий от fk0

Так что не понял реплики на счёт «рисовать на канвасе сразу».

Есть тэг такой - canvas.

Почему не image map - потому что у него есть ограничения на форму кусков, и вообще много нюансов. А вот на канвасе ты рисуешь всё, что в голову придёт, и делаешь с ним что угодно, так как тебе доступна работа хоть с пикселями. Правда, придётся помучаться с js-ом.

anonymous ()
Ответ на: комментарий от fk0

«бери канвас». Ну вот взял. А верстальщик координаты руками что ли в javascript впишет???

Нет. Ты напишешь нужный код, который позволит с канвасом работать удобнее, специально под твою задачу.

anonymous ()
Ответ на: комментарий от fk0

Стандартные элементы с цссом не позволяют круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка

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

xpahos ★★★★★ ()
Ответ на: комментарий от anonymous

Отлично. Но мне нужно для начало средство чтоб мышью выделить на картинке и в файлик записать координаты. image map это даёт. А canvas там потом будет или style=«position:absolute» — дело десятое! И совершенно не сложно ни там, ни там вставить картинку. Вопрос откуда взять координаты вставляемой картинки. Вот из image map можно. А никакие возможности canvas здесь ничем не помогают. И ограничения вида «полигон» вполне достаточны, чтоб просто обвести мышью. Даже можно сделать кнопку с дыркой...

fk0 ()
Ответ на: комментарий от fk0

не позволяют круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка.

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

anonymous ()
Ответ на: комментарий от fk0

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

В гимпе есть генератор image map, будет тебе html-код с пикселями.

anonymous ()
Ответ на: комментарий от xpahos

В css нельзя как-то просто сделать кнопку с дыркой впринципе. Или даже две рядом расположенные треугольные (квадрат разделённый по диагонали). Ибо в css все объекты — прямоугольные. А для остального нужен какой-то аналог image-map. Ну может в canvas можно сделать что-то круглое, я не вникал. Но если форму и координаты руками на javascript программировать — это не решает задачи, а только добавляет их. Придумать поверх этого всего тот же image map для задания нажимаемых областей и заставить javascript отрисовать как надо...

fk0 ()

то есть, вопрос в том, как именно рисовать спрайты?
точно видел, что спрайты для элементов активно используются в extjs (ныне sencha)

может, есть смысл туда посмотреть?

aol ★★★★★ ()
Ответ на: комментарий от anonymous

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

да и кроме того, в image map можно сделать несколько разрозненных областей с общим class для area. И по классу их однообразно отрабатывать. Т.е. можно получить объект состоящий из двух непересекающихся разрозненных областей.

про gimp я и говорю. Но мне интересно, может есть другие варианты и я чего-то не усматриваю.

fk0 ()
Ответ на: комментарий от Eddy_Em

В html5 должны быть только одни картинки — фотографии. А все остальное делается без долбаных картинок!

Че за бред? Как ты нормальный дизайн сделаешь без картинок?

TDrive ★★★★★ ()

Можно и так: сделать круглую кнопку без дырки, а потом в цент, абсолютно спозиционировать другую

jamy ()
Ответ на: комментарий от TDrive

Как ты нормальный дизайн сделаешь без картинок?

Нормальный дизайн == минималистичный дизайн. А вырвиглазное УГ не нужно.

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от Eddy_Em

за минималистический дизайн будет соответствубщая оплата...

fk0 ()
Ответ на: комментарий от fk0

Т.е. хорошо оплачивается только вырвиглазное дерьмо, которое хочется закрыть, едва увидев?

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от fk0

Стандартные элементы с цссом не позволяют круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка.

Круглую кнопку внутри другой круглой кнопки нарисовать на CSS3 нет никаких проблем.

Или хотя бы треугольные кнопки прижатые друг к другу.

Треугольная кнопка на CSS3 тоже получается легко: http://habrahabr.ru/post/142534/

trycatch ★★★ ()
Ответ на: комментарий от Eddy_Em

Нормальный дизайн == минималистичный дизайн. А вырвиглазное УГ не нужно.

У тебя очень скудное представление о нормальном дизайне.

TDrive ★★★★★ ()
Ответ на: комментарий от TDrive

У меня нормальное представление, в отличие от потребителей легкого поведения, которые на вырвиглазные свистоперделки накидываются так, как будто последний раз в жизни их видят…

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от Eddy_Em

У меня нормальное представление, в отличие от потребителей легкого поведения, которые на вырвиглазные свистоперделки накидываются так, как будто последний раз в жизни их видят…

Набери в гугле «примеры хорошего дизайна сайта».

TDrive ★★★★★ ()
Ответ на: комментарий от TDrive

Стопудово, первой будет ссылка на Тему Лебедева — известного извращенца.

// Oh, shi!!! Почти так, как я и думал!

Eddy_Em ☆☆☆☆☆ ()
Последнее исправление: Eddy_Em (всего исправлений: 1)
Ответ на: комментарий от Eddy_Em

// Oh, shi!!! Почти так, как я и думал!

«хонда расход 5 литров»? Ты себя хорошо чувствуешь?

Стопудово, первой будет ссылка на Тему Лебедева — известного извращенца.

Первая ссылка http://megagroup.ru/, в каком месте там вырвиглазность?

TDrive ★★★★★ ()
Ответ на: комментарий от TDrive

«хонда расход 5 литров»?

От же едрен-батон! Адрес, видимо, в клавиатурный буфер скопировался, а я из мышиного воткнул ☺

в каком месте там вырвиглазность?

Сайт как сайт, только вверху зачем-то пустота.

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от fk0

Не нужно этого делать. Не мучай дизайнера и не давай ему даже приближаться к коду и трогать хоть что-нибудь кроме макета. Дизайнер рисует картинки, остальное не его работа.

Данные можно хоть в жсоне хранить как тебе хочется, или свг опять таки.

Kalashnikov ★★★ ()
Ответ на: комментарий от Eddy_Em

Сайт как сайт, только вверху зачем-то пустота.

Это для тебя эталон качественного дизайна? Ок, больше нет вопросов. Но ты об этом лучше не рассказывай никому, нормальные люди не поймут.

TDrive ★★★★★ ()
Ответ на: комментарий от fk0

есть слои, есть background, есть jquery, который может по классам, например, сделать переход по ссылка, с указанием URL в data-

xpahos ★★★★★ ()
Ответ на: комментарий от fk0

Не бери image map, намучаешься. Рисуй на канвасе сразу.

На чём рисовать — дело десятое.
не понял реплики на счёт «рисовать на канвасе сразу».

и почему я не удивлён?

q11q11 ★★★★★ ()
Ответ на: комментарий от Eddy_Em

Нормальный дизайн == минималистичный дизайн. А вырвиглазное УГ не нужно.

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

Reaper ★★ ()
Ответ на: комментарий от fk0

А это размещение должен как-то дизайнер нарисовать. И он в цсс ничего не понимает.

Дезигнер в иллюстраторе сидит или в фотошопе, или ещё где-то и цссом не заморачивается вообще.

Виджетов ты, конечно, можешь понаделать, тока кому оно надо, если абсолютно любой дизайн средствами цсс можно сверстать? Что, собственно, все и делают.

Reaper ★★ ()
Ответ на: комментарий от Reaper

На вкус и на цвет все сайты разные. Это ужасно. И уродливо. А принудительное выставление цветов позволяет не убивать свои глаза и свою психику.

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от fk0

>круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка

Изверг!

anonymous ()
Ответ на: комментарий от Reaper

Средствами CSS невозможно просто сверстать дизайн буквально нарисованный дезигнером в редакторе. И с нестандартной (непрямоугольной) формой элементов. С этого всё и начинается. А с картинками и image maps для описания формы и позиции элементов, как я описал, можно.

Кроме того, ещё подумалось, вариант 1 изначально мной приведённый — он для дезигнера. А вариант 2 и 3 может генерироваться вообще программно, если нужно. Короче вопрос понятен. И здесь удобно, что дезигнер в фотошопе может сразу дезигн видеть (включая/выключая слои).

А теперь представим дезигнера и цсс. И будем его учить css и javascript (тут некоторые canvas упоминают). Атас.

fk0 ()
Ответ на: комментарий от fk0

Ты лолище )))

сделай прямо в браузере такую тулзу.

заодним будешь уверен, что то, что нарисовал (накидал в браузере) дизайнер - на 100% совпадает с тем, что будет на экране

краны у всех разные, с абсолютными координатами и размерами намаешься

stevejobs ★★★★☆ ()
Ответ на: комментарий от fk0

Средствами CSS невозможно просто сверстать дизайн буквально нарисованный дезигнером в редакторе. И с нестандартной (непрямоугольной) формой элементов.

Во-первых, возможно, все кривые загогулины в виде изображений переносятся - макет режется и полученные кусочки того, что проблематично рисовать средствами CSS, аккуратно вставляются на свои места. Во-вторых, CSS становится всё лучше, если раньше с градиентом / тенями мудохались, то сейчас всё стало очень просто, потом используя transform можно много чего придумать.

Ты показать в состоянии конкретный пример на картинке того, ради чего ты всё затеваешь? Я вот не представляю, что за такие виджеты нужные ты собрался создать, от которых через три секунды не сбегут с сайта. Недавно на рсдн чел спросил посмотреть, сказать как их виджеты воспринимаются: http://perfectwidgets.com/demo/index.html#Circles/0. Я не стал ничего писать, но убей не понимаю, на какой сайт можно это аляпистое гумно влепить.

Reaper ★★ ()
Последнее исправление: Reaper (всего исправлений: 1)
Ответ на: комментарий от fk0

Обычно информационный/презентационный сайт делают несколько человек: художник, верстальщик, программист, и по необходимости - дизайнер.

- Дизайнер - это что-то типа «кризисного менеджера», который решает вопросы типа «будем ли мы использовать треугольные кнопки. И который знает, почему и как можно сделать треугольную кнопку с квадратной боксмоделью так, чтобы это никому не помешало.
- Художник отрисовывает задумку в Photoshop/Illustrator.
- Верстальщик растеризует ее, режет, адаптирует к резионовому/адаптивному/фиксированному представлению. Возможно реализует какую-то логику с помощью шаблонизатора.
- Программист натягивает дизайн на программную платформу и дописывает кастомную логику

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

stevejobs ★★★★☆ ()
Ответ на: комментарий от stevejobs

Это сказал сам Джобс! Мне нужен флеш!

В айфоне нет флеша — вот проблема. Должно работать в айфоне.

fk0 ()
Ответ на: комментарий от stevejobs

Экраны у всех примерно одинаковые... ну будет растягиваться всё до размера экрана (на весь экран), но не меньше минимального размера (тогда скроллить) и не больше некого максимального, и с сохранением пропорций. Размещаться по центру. У тех, у кого альбомная ориентация экрана — слева и справа будут чёрные полоски. У кого очень большой экран — ещё и сверху и снизу полоски. Как в кино.

Картинки браузер умеет растягивать (старые плохо...) Как растянуть image map тоже понятно.

fk0 ()

Если твой дизайн без жабаскрипта развалился, то он не нужен.

Deleted ()
Ответ на: комментарий от fk0

Стандартные элементы с цссом не позволяют круглую кнопку с дыркой посередине, внутри которой будет ещё одна, другая, кнопка. Или хотя бы треугольные кнопки прижатые друг к другу

Почем опиум для народа? :D

Boba_Fett ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.