VPF::Выделение области картинки с помощью мышки

Elfet

Дата 23.10.2005, 09:46 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16

Ух ты!

Класс!

--------------------

PHP Чат Скрипт

Sardar

Дата 23.10.2005, 14:02 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

diam обычно селекция обратная, т.е. активное поле (то что у тебя заливаеться) наоборот прозрачно, а всё вокруг заливаеться. Также в стилях нет однострочных коментариев //, есть блоковые /* */.

Слой заливки(divid) лучше положить внутрь owndiv, последний положить на релативную позицию position: relative. Таким образом координаты divid будешь отсчитывать не от document.documentElement, a от owndiv, что горадо удобней, не нужно париться со скроллингом страницы.

Не совсем корректно устанавливать обработчиков событий на document, ведь ты отлавливаешь события на конкретном слое. К тому же представь что у тебя таких картинок с выделениями много на странице. События лучше отлавливать на owndiv.

В остальном очень хорошо получилось smile

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

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

diam

Дата 24.10.2005, 12:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 348
Регистрация: 23.1.2005
Где: Екатеринбург

Репутация: 6
Всего: 16

Цитата(Sardar @ 23.10.2005, 14:02)

Слой заливки(divid) лучше положить внутрь owndiv, последний положить на релативную позицию position: relative. Таким образом координаты divid будешь отсчитывать не от document.documentElement, a от owndiv, что горадо удобней, не нужно париться со скроллингом страницы.

Хорошо, координаты divid получать относительно owndiv. Но как их соотнести с evt.clientX|evt.clientY?

Гость_12345

Дата 24.10.2005, 12:48 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

diam: Но описанный баг в IE6 XP SP2 имеется. (Как в старой, так и в только что изменённой версии.)

Sardar

Дата 24.10.2005, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

А не замечал у event обьекта полей offset(X|Y) (для мозиллы layer(X|Y)), координаты от offsetParent элемента (для Оперы всегда от текущего элемента). Убираем все если связанные с разными браузерами, делаем стиль для owndiv position: relative (теперь он offsetParent для всего содержимого), ловим на нём мышь, опрашиваем выше назанные поля. Координаты от левого верхнего угла owndiv.

--------------------

Guest

Дата 24.10.2005, 13:23 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Не нашёл пока что описания функции .setCapture(false), вызывающей зависание, но "баг" исправляется добавлением такой функции (описание которой тоже не нашёл : ) ) в районе строки 100

Код


    if (div.style.width == '0px' && div.style.height == '0px') div.style.visibility = 'hidden';
    if (!evt.stopPropagation)img.releaseCapture(false); //добавлена

diam

Дата 24.10.2005, 13:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 348
Регистрация: 23.1.2005
Где: Екатеринбург

Репутация: 6
Всего: 16

Точно, Sardar! Пропустил smile

.

Это сообщение отредактировал(а) diam - 24.10.2005, 13:43

Гость_12345

Дата 24.10.2005, 17:24 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

Код


<html><head><title>наведение областей (IE6)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>.bound{position:absolute;
    border-width:1;border-style:solid;border-color:red;
    background-color:#e0e0c0;filter:alpha(opacity=50,Style=0);}
</style>
<script>d=document;mouseDown=0;
d.ondragstart=function(){event.returnValue=!1;}
d.onmousedown=function(){d.body.appendChild(b=d.createElement('DIV'));
    b.className='bound';
    b.innerHTML='<img src=012.gif width=3 height=3>';
    b.style.posTop=posY=T0=event.y+d.body.scrollTop;
    b.style.posLeft=posX=L0=event.x+d.body.scrollLeft;
    b.style.posHeight=4;b.style.posWidth=4;
    mouseDown=1;
};
d.onmouseup=function(){mouseDown=0;};
d.onmousemove=function(){if(mouseDown!=1)return;
    b.style.posTop=Math.min(T0,event.y+d.body.scrollTop);
    b.style.posLeft=Math.min(L0,event.x+d.body.scrollLeft);
    b.style.posHeight=Math.max(T0,event.y+d.body.scrollTop)-b.style.posTop;
    b.style.posWidth=Math.max(L0,event.x+d.body.scrollLeft)-b.style.posLeft;
}
</script>
<body><div>Нажиманием мыши рисуем прямоугольники.</div>
</body></html>

Sardar

Дата 24.10.2005, 17:46 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Гость_12345 набери в поиске -moz-opacity, выплывут как минимум две темы, где я приводил код с прозрачностью, там почти для всех браузеров. Убивать квадратики можешь отлавливая на них двойной клик, удобно. Xотя практическое применение такому скрипту трудно найти, ну квадратики... smile

Кстати регистрируйся получишь свою историю, фавориты, почтовый ящик и многое другое.

--------------------

Гость_12345

Дата 25.10.2005, 04:01 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Sardar : посмотрел. В конце концов, оказалось, что фильтр остался нужен только для IE, а ради Оперы пришлось применить полупрозрачный PNG, а он и FF захватил. А так - да, и CSS3-opacity в FF работает.

Насчёт применения ты неправ - этот скрипт есть основа для решения исходной задачи. Ведь если я научился делать много "квадратиков", то ничего не стоит ограничиться одним и ограничить его рамками рисунка-подложки, как требовалось, с помощью логики. Другие применения - рисовать графические рамки комментариев к текстам форума в нужных местах (привязывая к тексту), организовать таким образом форум нового типа - "визуальный", оставлять более 1 комментария за раз. Писать комментарии к картинкам, как в этой задаче или как делают в сервисе flickr.com (фотообмен), выделяя прямоугольником комментируемое место.

Кроссбраузерное решение:

Код

<html><head><title>наведение областей (IE6, FF1.06, Opera7.54)</title>
<meta http-equiv="Content-Type" content="charset=windows-1251">
<style>.bound{position:absolute;
    border-width:1;border-style:solid;border-color:red;
    background-image: url(alpha50.png);
    filter:alpha(opacity=60); /*-moz-opacity: 0.5; opacity: 0.5; /* CSS3 */}
</style>
<script>d=document;mouseDown=0;Mo=navigator.userAgent.indexOf('Gecko')>0;
d.ondragstart=function(){event.returnValue=!1;}
d.onmousedown=function(e){d.body.appendChild(b=d.createElement('DIV'));
    b.className='bound';
    b.innerHTML='<img alpha50.png width=4 height=4>';
    b.style.top=posY=T0=!Mo?event.y+d.body.scrollTop:e.clientY + pageYOffset;
    b.style.left=posX=L0=!Mo?event.x+d.body.scrollLeft:e.clientX + pageXOffset;
    b.style.height=4;b.style.width=4;
    mouseDown=1;
};
d.onmouseup=function(){mouseDown=0;};
d.onmousemove=function(e){if(mouseDown==1){
    b.style.top=Math.min(T0,x=!Mo?event.y+d.body.scrollTop:e.clientY + pageYOffset);
    b.style.left=Math.min(L0,y=!Mo?event.x+d.body.scrollLeft:e.clientX + pageXOffset);
    b.style.height=Math.max(T0,x)-parseInt(b.style.top);
    b.style.width=Math.max(L0,y)-parseInt(b.style.left);
}Ъ</script>
<body><div>Диагональным протаскиванием мыши рисуем прямоугольники.</div>
</body></html>

Посмотреть на работу можно сразу по ссылке burime.org.ru/test1/JsPrimeryCode-52.htm . Используется PNG с прозрачностью 50% - alpha50.png (160 ба). Он же - вместо прозрачного гифа внутри создаваемых областей просто для экономии числа файлов в примере.

Sardar

Дата 25.10.2005, 14:49 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Не плохое решенение.

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

--------------------

diam

Дата 26.10.2005, 17:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 348
Регистрация: 23.1.2005
Где: Екатеринбург

Репутация: 6
Всего: 16

Немного переписал выделение области картинки.
Сначала смотрим вариант без графического выделения, потом вариант с графическим выделением (выделенная область становится матовой). Вариант выделения, предложенный Sardar'ом, выложу чуть попозже

Sardar

Дата 27.10.2005, 02:44 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

diam сервак пароли спрашивает...

--------------------

diam

Дата 27.10.2005, 05:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 348
Регистрация: 23.1.2005
Где: Екатеринбург

Репутация: 6
Всего: 16

login: vingrad
password: vingrad

Sardar

Дата 27.10.2005, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

diam не плохо, остались два момента: как поместить на страницу несколько выделяемых картинок и явная передача в некоторую функцию координат и сорцов картинки. Последняя опросит сервер и обновит картинку.

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »