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

Elfet

Дата 8.8.2005, 13:53 (ссылка)

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

Загрузка ...

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

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

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

Мне нужно выделить и отметить прямоугольную область на картинке. Не знаю как это сделать! smile

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

PHP Чат Скрипт

Elfet

Дата 8.8.2005, 21:15 (ссылка)

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

Загрузка ...

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

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

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

У меня не удаётся выделить цветом участок на картинке

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

PHP Чат Скрипт

sergejzr

Дата 8.8.2005, 21:19 (ссылка)

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

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

Репутация: 10
Всего: 360

Значится так:
Тебе надо разделить процесс.
Отлавливаешь событие ondrag и когда отпустили мышь. По этим координатам вырешиваешь прямоугольник и рисуешь цветной квадрат поверх.

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

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

Me.
FB.
LinkedIn.
ORCID.
YT.

Sardar

Дата 8.8.2005, 21:34 (ссылка)

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

Загрузка ...

Бегун

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

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

Рутинна это, довольно нудная smile

Берём слой на релативной позиции, что бы не париться с координатами. Кладём в него картинку и четыре слоя на абсолютной позиции, в бекграунд которых ложим полупрозрачный(4 пиксельный, 2 прозрачных, 2 нет) .gif. Ловим клик(mousedown), ловим mousemove, считаем координаты(layer(X|Y), ofset(X|Y)). Изменяем размеры слоёв лжащих поверх картинки, так что бы затушевать часть картинки. Красиво будет если задать им бордер dotted 1px #555 у каждого со своей стороны + поставить маленькие квадратные синие слои по углам, как квадаратики. Ловим вхождение мыши на слоях, что бы "сдвигать" селекцию.

Работа над такой фичей, что бы было как в любом сканере/редакторе потребует целого дня, уж больно рутины много.

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

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

Elfet

Дата 11.8.2005, 14:21 (ссылка)

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

Загрузка ...

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

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

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

Код


<html>
<head>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF00FF" alink="#FF0000">
<script>

var x1=0,y1=0,x2=0,y2=0;
var nomxy=1;

function getxy()
{
 if(nomxy==1)
 {
  document.getElementById('xy1').value=xy_x+"x"+xy_y;
 }
 else if(nomxy==2)
 {
  document.getElementById('xy2').value=xy_x+"x"+xy_y;
  nomxy=0;
 }
  nomxy++;
}



function showwhat(x,y)
{
 if(x1==0&&y1==0&&x2==0&&y2==0)
 {
  x1=document.getElementById('xyimg').style.pixelTop;
  y1=document.getElementById('xyimg').style.pixelLeft;
 }
 else
 {
 
 if(nomxy==1)
 {
  document.getElementById('xyh1').value=xy_x+"x"+xy_y;
  document.getElementById('xyselect').style.top=y;
  document.getElementById('xyselect').style.left=x;
  xy_y=document.getElementById('xyselect').style.pixelTop;
  xy_x=document.getElementById('xyselect').style.pixelLeft;
 }
 else if(nomxy==2)
 {
 // xy_x=x;
 // xy_y=y;
  document.getElementById('xyh2').value=xy_x+"x"+xy_y;
  if(xy_y-document.getElementById('xyselect').style.pixelTop > 10)
  {
   document.getElementById('xyselect').style.height=y-document.getElementById('xyselect').style.pixelTop;
  } 
  if(xy_x-document.getElementById('xyselect').style.pixelLeft > 10)
  {
   document.getElementById('xyselect').style.width=x-document.getElementById('xyselect').style.pixelLeft;
  }  
 }
 
 }
 showred();
}

function showred()
{
 
}

</script>
<div id="xyselect" style="position: absolute;    border: solid 1px red;"></div>
<input type="text" id="xyh1" value="" size="5" disabled><input type="text" id="xyh2" value="" size="5" disabled><br>
<input type="text" id="xy1" value="" size="5"><input type="text" id="xy2" value="" size="5"><br>
<img id="xyimg" onclick="javascript:getxy();" onmousemove="javascript:showwhat(event.x, event.y);"; src="../../../Documents and Settings/Elfet/Ìîè äîêóìåíòû/Ìîè ðèñóíêè/20050309_gruzin_wallpapers_ru_les_1024x768_A(77376)PI.jpg" alt="Âûäåëèòå îáëàñòü" border="0">
</body>
</html>

Ничего у меня не выходит smile

Видимо потому что я бнру глобальные координаты. А как получить координаты т начала картинки?

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

PHP Чат Скрипт

Elfet

Дата 12.8.2005, 12:08 (ссылка)

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

Загрузка ...

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

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

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

Как получить координаты мышки относительно начала картинки?

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

PHP Чат Скрипт

Sardar

Дата 12.8.2005, 16:31 (ссылка)

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

Загрузка ...

Бегун

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

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

Под мозиллой это event.layer(X|Y), под ИЕ это event.offset(X|Y).

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

Гость_Elfet

Дата 13.8.2005, 09:23 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Sardar, ага, так работает, но только вот с выделением проблемы smile

Вот так я получаю координаты относительно картинки: this.event.offsetX,
Но мне никак не выделить эту облость, у меня выделяется эта облость, но не относительно картинки, а относительно всей страницы: document.getElementById('xyselect').style.pixelLeft=this.event.offsetX;
Что тогда делать? smile

Вот это не помогает: document.getElementById('xyimg').style.pixelLeft - пишет, что 0

Aliance

Дата 15.8.2005, 22:59 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Elfet
Модератор: Пожалуйста, один топик - один вопрос.
Пользуйся поиском, помню давно была подобная тема. Кажется, там и решение. Если не найдешь - попробую поискать...

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Elfet

Дата 16.8.2005, 16:54 (ссылка)

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

Загрузка ...

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

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

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

Aliance, я посмотрел. Там такая тема есть, но там нет решения. А у меня по прежнему нечего не получается. Помогу плиз!

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

PHP Чат Скрипт

Elfet

Дата 18.8.2005, 17:08 (ссылка)

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

Загрузка ...

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

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

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

Вот, я понял, что нужно брать обе координаты, по картинке и глобальные. но все равно ничего не выходит smile

Может кто видел уже такие скрипты? Где их можно поискать?

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

PHP Чат Скрипт

diam

Дата 18.8.2005, 20:41 (ссылка)

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

Загрузка ...

Опытный

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

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

Такой реализации я не видел. Много реализаций, где просто водишь квадратик над картинкой, и где-нибудь в другом месте на сайте та часть картинки, на которой квадратик, видна у тебя. Но это не то.

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

Elfet, если хочешь, можешь написать его быстрее меня smile

.

Идея скрипта.
Во-первых, просто так мы не можем выложить картинку и водить по ней мышкой, потому что firefox будет пытаться скопировать ссылку на данную картинку, опера потащит картинку за собой, может быть, ИЕ как-то накосячит (не знаю, не пользуюсь им).
Во-вторых, нам нужен некий элемент прозрачности. Есть такое свойство в CSS: opacity, но оно не работает в Opera. Поэтому, если пользователи этих браузеров нам важны, придётся искать альтернативу. Я её вижу в полупрозрачном маленьком рисунке gif или png, который мы сможем размножить.

Поэтому, предлагаю писать слоями в следующем порядке (относительно нашей конструкции):
1. На самом нижнем слое лежит картинка размерами X на Y.
2. На самом верхнем слое - div размерами X на Y со свойством background-color : transparent. Он будет выполнять роль стекла.
3. Посредине между ними div, размер которого будет меняться скриптом, а свойства фона будут задаваться background-image : url(transparent.gif) и background-repeat : repeat.

Что тогда мы получаем?
Когда кликаем мышкой по картинке (на самом деле, по верхнему диву smile

), мы уже не тащим за собой картинку, потому что она "под стеклом" smile

. Мы будем отлавливать событие mousemove при движении по верхнему DIV'у-стеклу, и, исходя из координат начальной точки (получим при mousedown) будем формировать размер среднего дива, тем самым получая нужную нам картину: выделение полупрозрачным цветом. Заодно можем отрисовывать выделенное где-угодно (но это тема для отдельного топика, здесь это оффтоп smile

). Далее, когда отпускаем мышь (событие mouseup), получим координаты конечной точки - выделенный прямоугольник готов. Дальше уже можно действовать по вкусу: спрятать выделение, не прятать, сделать менее прозрачным - в общем, чего душа пожелает.

Итак, это была идея. По моему, должно заработать.
Повторюсь. Времени у меня очень мало, но задача мне очень интересна. Попробую написать. smile

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

Elfet

Дата 18.8.2005, 21:03 (ссылка)

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

Загрузка ...

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

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

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

Цитата(diam @ 18.8.2005, 21:41)

Попробую написать

БЫло бы, здорово! smile

Сам я пытался сделать только под ИЕ, но ничего не вышло smile

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

PHP Чат Скрипт

diam

Дата 23.10.2005, 00:56 (ссылка)

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

Загрузка ...

Опытный

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

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

Много времени прошло, но тему надо поднять, потому как лучше поздно, чем никогда smile

.

Начнём.

Сразу же выложу готовый вариант, что бы понимали, о чём речь.
Логин: vingrad.
Пароль: vingrad.

Что мы имеем?
1. Картинка, область которой нужно выделить.
2. Полупрозрачный слой, который будет располагаться выше выделяемой картинки и будет показывать нам, какую область мы выделяем (или уже выделили).
3. Документ, в котором всё это располагается smile

.

Для работы выделим координаты двух крайних точек картинки:
1. Координаты левой верхней точки картинки относительно начала документа (назовём эту точку pp0, а её координаты по осям абциссы и ординаты ppx0 и ppy0 соответственно).
2. Координаты правой нижней точки картинки относительно начала документа (назовём эту точку pp1, а её координаты по осям абциссы и ординаты ppx1 и ppy1 соответственно).

Далее нужно разобраться с полупрозрачным слоем, который будет показывать нам выделенную нами область. Свойством CSS opacity нам не воспользоваться - опера не понимает. Красивыми полупрозрачными png'шками тоже, на этот раз тупит IE. А gif просто не умеет иметь полупрозрачный слой. Он умеет быть или прозрачным совсем (что нам не нужно), или совсем непрозрачным (что нам так же не подходит, так как не будем видеть то, что выделяем).
Выход я нашёл следующий: я создал gif-файл размером 3x3 пикселя, фон у него сделал прозрачным и первый пиксель закрасил в серый цвет. Потом для нашего псевдополупрозрачного слоя применил такие правила CSS:

Код


#divid {
        /* cut */
        position: absolute;
        background : url("./2.gif") repeat;
        border: 1px solid #444;
        /* cut */
}

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

(потом посмОтрите на примере, всё выглядит не так уж плохо smile

).

Теперь о том, что и как мы будем выделять.
Мы будем отлавливать у всего документа события mousedown, mouseup, mousemove. Почему у всего документа? Что бы было удобнее для пользователя выделять (позже объясню почему).
При нажатии на кнопку мыши будет запускаться функция, которая будет проверять, находимся ли мы внутри картинки. Если да, то будет фиксироваться флаг isAllocated, который скажет, что мы сейчас работаем с выделением, и координаты точки, где была опущена кнопка (назовём её ps0).
Когда мы будем водить мышку по картинке с установленным флагом isAllocated, то будем получать ещё одну точку, которую назовём ps1, она то и будет завершать область выделения.
Исходя из двух крайних точек (ps0 и ps1) мы будем знать, где нам расположить полупрозрачный слой и каким размером его сделать.
После выделения мы будем отпускать кнопку мыши, при этом флаг isAllocated будет сброшен, а мы получим готовую выделенную область на картинке.

Вот вроде бы и всё, смотрите код, в нём все более подробно. Можете его скопировать, вставить в файл, и просмотреть в браузере, но тогда вам нужно позаботиться о выделяемой картинке и о gif'ке с фоном.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример выделения</title>
<style type="text/css">
<!--
// полупрозрачный слой над картинкой
#divid {
        position: absolute;
        // фон  - полупрозрачная gif'ка
        background : url("./2.gif") repeat;
        border: 1px solid #444;
        visibility: hidden;
}

// в этот слой помещена картинка
// (картинку так же можно поместить и в табличную ячейку - для архаиков и консерваторов :) )
#owndiv {
        padding: 15px;
        border: 1px solid #aaa;
        background: #eee;
        width: 425px;
}
-->
</style>
</head>
<body>
<!-- Выделяемая картинка внутри слоя -->
<div id="owndiv">
        <img id="imgid" src="./1.gif" alt="" />
</div>

<!-- Псевдополупрозрачный слой -->
<div id="divid"></div>

<script type="text/javascript">
// функция поиска координат объекта относительно начала документа
// (c) Sardar
function getPosition(obj) {
        var x = 0;
        var y = 0;
        var obj = obj || false;
        while (obj) {
                x += obj.offsetLeft;
                y += obj.offsetTop;
                obj = obj.offsetParent;
        }
        return [x, y];
}

// Картинка
var img = document.getElementById("imgid");

// Слой, внутри которого лежит картинка
var owndiv = document.getElementById("owndiv");

// Слой, показывающий нам область выделения
var div = document.getElementById("divid");


// Координаты верхней левой точки картинки (точка pp0)
var ppx0, ppy0;

// Координаты нижней правой точки картинки (точка pp1)
var ppx1, ppy1;

// Координаты точки начала выделяемой области (точка ps0)
var psx0, psy0;

// Флаг, показывающий, что выделение началось
var isAllocated = false;

// Функция на событие mousedown, устанавливающая флаг isAllocated
function mDown (evt) {
        // Ловим координаты точек pp0 и pp1 картинки.
        // Ловим каждый раз, поскольку документ может изменяться
        var imgPosition = getPosition(img);
        ppx0 = imgPosition[0];
        ppy0 = imgPosition[1];
        ppx1 = ppx0 + img.width;
        ppy1 = ppy0 + img.height;

        // Вычисляем координаты точки ps0 - откуда начинается выделяемая область.
        // Кроме clientX|clientY используем pageXOffset|pageYOffset
        // (document.body.parentNode.scrollLeft|document.body.parentNode.scrollTop)
        if (evt && evt.stopPropagation) {
                psx0 = evt.clientX + pageXOffset;
                psy0 = evt.clientY + pageYOffset;

                // предотвращаем таскание картинки за мышкой Opera'ой и FF.
                evt.preventDefault();
        } else if (window.event) {
                psx0 = event.clientX + document.body.parentNode.scrollLeft;
                psy0 = event.clientY + document.body.parentNode.scrollTop;

                // предотвращаем таскание картинки за мышкой IE
                img.setCapture(false);
        }

        // Проверяем, находимся ли мы при нажатии на кнопку мышки на картинке
        if (psx0 < ppx0 || psx0 > ppx1 || psy0 < ppy0 || psy0 > ppy1) return;

        // Мы на картинке.
        //Устанавливаем флаг и задаём новые свойства полупрозрачному слою
        isAllocated = true;
        div.style.visibility = 'visible';
        div.style.top = psy0 + 'px';
        div.style.left = psx0 + 'px';
        div.style.width = '0px';
        div.style.height = '0px';
}

// функция на событие mouseup, сбрасывающая флаг isAllocated
function mUp (evt) {
        if (!isAllocated) return;
        isAllocated = false;

        // Если выделение по размерам 0x0 пикселей - просто скрыть его с глаз
        if (div.style.width == '0px' && div.style.height == '0px') div.style.visibility = 'hidden';
}

// функция на событие mousemove, изменяющая размер и положение
// полупрозрачного слоя
function mMove (evt) {
        if (!isAllocated) return;
        if (evt && evt.stopPropagation) {
                var psx1 = evt.clientX + pageXOffset;
                var psy1 = evt.clientY + pageYOffset;
        } else if (window.event) {
                var psx1 = event.clientX + document.body.parentNode.scrollLeft;
                var psy1 = event.clientY + document.body.parentNode.scrollTop;
        }

        // Проверяем, не зашли ли мы за края картинки
        if (psx1 < ppx0) psx1 = ppx0;
        else if (psx1 > ppx1) psx1 = ppx1;
        if (psy1 < ppy0) psy1 = ppy0;
        else if (psy1 > ppy1) psy1 = ppy1;

        // Устанавливаем размеры выделяемой области в DIV'е
        if (psx1 > psx0) {
                div.style.left = psx0 + 'px';
                div.style.width = (psx1 - psx0) + 'px';
        } else {
                div.style.left = psx1 + 'px';
                div.style.width = (psx0 - psx1) + 'px';
        }
        if (psy1 > psy0) {
                div.style.top = psy0 + 'px';
                div.style.height = (psy1 - psy0) + 'px';
        } else {
                div.style.top = psy1 + 'px';
                div.style.height = (psy0 - psy1) + 'px';
        }
}

// Устанавливаем обработчики событий.
// Можно, конечно, установить не на весь документ, а только на объект,
// внутри которого находится картинка, но работать будет уже далеко не так удобно.
// Попробуйте заменить document на owndiv и вы поймёте, почему.
if (document.addEventListener) {
        document.addEventListener("mousedown", mDown, true);
        document.addEventListener("mouseup", mUp, true);
        document.addEventListener("mousemove", mMove, true);
} else if (document.attachEvent) {
        document.attachEvent("onmousedown", mDown);
        document.attachEvent("onmouseup", mUp);
        document.attachEvent("onmousemove", mMove);
}
</script>
</body>
</html>

Работает в следующих браузерах:

FF 1.7.10
IE 6.0.2900.2180
Opera 8.02

Пользуйтесь на здоровье smile

(можно ещё в "наши скрипты" поместить, если модераторы не против).

З.Ы. У меня просьба к модераторам: нельзя ли файл с примером поместить на vingrad, а то у меня машинка периодически перезагружается smile

.

Это сообщение отредактировал(а) diam - 23.10.2005, 21:04

diam

Дата 23.10.2005, 01:43 (ссылка)

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

Загрузка ...

Опытный

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

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

Для данной реализации только что обнаружил баг, он касается всех тех, кто сидит в Windows и пользуется IE.

Если Вы загрузите страничку и выделите какую-нибудь область на картинке, IE не даст Вам нажать ни одной кнопки в меню, пока окно не потеряет фокус, а потом снова его не поймает!

Данный баг обнаружен на Windows XP SP2, запущенного под эмуляцией VMWare во FreeBSD (думаю, что баг останется, даже если загрузиться в винду без всяких эмуляторов).

Правда, запустил IE через wine, такого бага обнаружено не было.

Это сообщение отредактировал(а) diam - 23.10.2005, 01:44

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орошо будет если выложижь в наши скрипты, особенно после доработки упомянутой выше.

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

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 не плохо, остались два момента: как поместить на страницу несколько выделяемых картинок и явная передача в некоторую функцию координат и сорцов картинки. Последняя опросит сервер и обновит картинку.

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

diam

Дата 28.10.2005, 07:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Вариант с обратной селекцией, предложенный Sardar'ом, здесь.

Работает в Gecko, Opera. В IE проблема: у задающих обратную селекцию DIV'ов sd1..sd4 при установке свойства

Код


sdX.style.height = '0px';

фактическая высота DIV'а не становится равной 0, поэтому выглядит отстойно. Вопрос, наверное, в вёрстку. Ещё до вечера буду экспериментировать. Если у кого-нибудь будут мысли, почему так происходит, выкладывайте.
Добавлено @ 07:40

Цитата(Sardar @ 27.10.2005, 11:02)

как поместить на страницу несколько выделяемых картинок

А в чём проблема? Сейчас же события не привязываются к document, только к слою owndiv. Если нужно несколько картинок, то сделать несколько слоёв, в которые запихать эти картинки (один слой на одну картинку smile

), по аналогии с примером. smile

.
Добавлено @ 07:46

Цитата(Sardar @ 27.10.2005, 11:02)

явная передача в некоторую функцию координат и сорцов картинки.

Зачем? Координаты левой верхней точки картинки pp0 (ppx0, ppy0) объявлены в глобальном контексте кода и доступны откуда угодно внутри документа.

Это сообщение отредактировал(а) diam - 28.10.2005, 07:41

Sardar

Дата 28.10.2005, 10:45 (ссылка)

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

Загрузка ...

Бегун

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

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

Последний штрих: селекция должна появляться на картинки только в момент селектирования, т.е. нажатия кнопкой мыши smile

Выставляй авторство/копирайты и в базу скриптов "Наши скрипты", хороший скрипт smile

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

diam

Дата 28.10.2005, 10:59 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(Sardar @ 28.10.2005, 10:45)

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

Сейчас так и сделано. Единственный есть косяк, что если нажать на кнопку мыши на картинке, начать выделять, потом выйти за пределы слоя owndiv и отпустить клавишу мыши, тогда при возвращении на слой с картинкой при отпущенной клавише мыши выделение так же будет происходить.
Что бы это исправить, можно отлавливать событие mouseup по всему document, но только если отпустим мышь за пределами окна браузера - опять получим двадцать пять. smile

. Поэтому я не стал это исправлять.

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

Цитата(Sardar @ 28.10.2005, 10:45)

Выставляй авторство/копирайты и в базу скриптов "Наши скрипты", хороший скрипт smile

Нужно ещё отладить, что бы в IE работало, хорошо откомментировать, а потом и в "Наши скрипты".

Это сообщение отредактировал(а) diam - 28.10.2005, 12:56

diam

Дата 28.10.2005, 13:02 (ссылка)

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

Загрузка ...

Опытный

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

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

Ещё раз. Три варианта.
1
2
3

Вариант N1
Никаких графических выделений области картинки. Просто нажимаем на кнопку мыши на картинке, водим мышкой по картинке, потом отпускаем кнопку. Внизу смотрим координаты верхней левой точки выделяемой области, её ширину, высоту.

Вариант N2
В дополнение к варианту N1 делает выделяемую область матовой.

Вариант N3
Отличается от варианта N2 инверсным выделением.

Гость_12345

Дата 28.10.2005, 14:39 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

diam: Чтобы в IE фактическая высота была равна 1, засунь в слой рисунок с высотой 1 без пробелов и переносов строк.

Guest

Дата 28.10.2005, 15:11 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Покрутил вариант 3 в IE, и виден баг при загрузке или рефреше страницы и первом выделении области - не отрисовывается нижний слой. С этим не стал разбираться - сподручнее автору.

Побороть "отстойность" показа в IE можно ещё без рисунка, а с .sd {font-size:0px; ... или 1px} . Но там всё равно слой на слой немного налезает, и надо вводить особые условия, думаю.

Гость_12345

Дата 28.10.2005, 15:13 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Забыл спросить - какой особый смысл в записи имени файла в виде "./имя_файла", а не просто "имя_файла"?

Гость_12345

Дата 11.11.2005, 15:41 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Тут тоже такое делали, но под IE

http://911.ru/to_rsdn/mouse_rect.html

chapchap

Дата 2.4.2006, 17:38 (ссылка)

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

Загрузка ...

Новичок

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

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

Выложите пожалуйста скрипты, хотел посмотреть примеры, а ссылки не открываются. :(

diam

Дата 7.4.2006, 14:35 (ссылка)

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

Загрузка ...

Опытный

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

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

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

chapchap

Дата 7.4.2006, 15:59 (ссылка)

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

Загрузка ...

Новичок

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

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

Угу, заранее спасибо! Просто у самого ничего путного не получается (java к сожалению очень плохо знаю). Если javascript не получится, буду на чём-нибудь другом писать.

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