![]() |
Модераторы: Sardar, Aliance |
![]() ![]() ![]() |
|
part_spb |
|
|||
Новичок Профиль Группа: Участник Сообщений: 16 Регистрация: 1.11.2007 Репутация: нет Всего: нет |
Может быть не туда пишу но все же...
Подскажите каким способом реализовать такую функцию как выделение части изображения и формирование подписи к ней(как это сделано на сайте вконтакте, при выделении пользователй на фотографиях), может быть есть каие готовые решения? |
|||
|
||||
Dima 2015 |
|
|||
Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 287 Регистрация: 16.3.2008 Где: SPb Репутация: нет Всего: 2 |
Нуу-с... задачка обширная на самом деле, состоит из нескольких этапов. Часть из них без сомнения относится к JS. А именно...
1. Процесс "помечания" фотографии. Очевидно это клиенсткая часть и делается на JS. Тыкаем на ссылочку "отметить", у нас на фотку накладывается слой с дивом, у которого можно перетаскиванием изменять размеры. Для простоты можно просто этому диву сделать видимую границу. Чтобы сделать как на вконтакте - с этим затемнением, это сложнее. Очень советую вооружиться фаербагом и посмотреть как у них там реализовано, там все хитро... там есть 2 изображения, одно - исходное, второе - затемненное. И есть тот саммый див, который суть отмечаемая область. Ну и все это дело так сгруппировано, что создается эффект затемнения с просветом там, где выделяемая область. При ресайзе дива (как его сделать этот ресайз, тоже отдельная задача, решается на JS, почти уверен что у jquery есть подходящие методы.)... так вот, при ресайзе дива в скрытое поле формы пишутся координаты вершин выделенной области. Дальше есть рядом диалогове окно, куда можно ввести лэйбл. Отмечаем, жмем отправить, отправляется форма с координатами и текстом метки. Ну на вконтакте туда еще список друзей подгружается, эт тоже отдельная тема. 2. Серверная часть. Данные из формы п.1 приходят на сервер и заносятся в базу. Примерно так - есть таблица photo_labels, у нее след. поля: ид, фото, х1, у1, х2, у2, текст. Т.е. для каждой фотографии каждый акт выделения отражается как строчка в базе. Теперь надо понять, как это дело показывается пользователю. Когда он открывает фотографию, делается запрос в базу за информацией о метках на этой фотографии. На основе этой информации формируется хтмл- и js-код, осуществляющий подсветку помеченной области при наведении на нее. 3. Как сделать подсветку области фотографии при наведении. Это тоже вопрос по клиенсткой части, а именно тут придется курить js, html и css. Но в общих чертах так: Из п.2 мы знаем что у нас есть информация о метках на фотографии - координаты и тексты этих меток. Предположим, что эта информация занесена в js-массивы. Мы вешаем на mousemove по фотографии ф-цию, которая считывает координаты курсора и смотрит, не оказался ли курсор внутри помеченной области. Как только оказался - происходит наложение на фотографию слоя с дивом, символизирующим отмеченную область, ну и всплывает текст метки, или там где-то что-то подсвечивается, это уже как душе угодно... Вот, в целом я так себе представляю как это выглядит. |
|||
|
||||
ksnk |
|
|||
![]() прохожий ![]() ![]() ![]() ![]() Профиль Группа: Комодератор Сообщений: 6855 Регистрация: 13.4.2007 Где: СПб Репутация: 48 Всего: 386 |
-------------------- Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! ![]() |
|||
|
||||
part_spb |
|
|||
Новичок Профиль Группа: Участник Сообщений: 16 Регистрация: 1.11.2007 Репутация: нет Всего: нет |
всем спасибо за ответы.Буду пытаться двигаться в этом направлении.
|
|||
|
||||
![]() ![]() ![]() |
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | JavaScript: для новичков | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |