Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Выделение области картинки с помощью мышки

Автор: Elfet 8.8.2005, 13:53

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

Автор: Elfet 8.8.2005, 21:15

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

Автор: sergejzr 8.8.2005, 21:19

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

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

Автор: Sardar 8.8.2005, 21:34

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

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

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

Автор: Elfet 11.8.2005, 14:21

Код


<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

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

Автор: Elfet 12.8.2005, 12:08

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

Автор: Sardar 12.8.2005, 16:31

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

Автор: Гость_Elfet 13.8.2005, 09:23

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

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

Автор: Elfet 16.8.2005, 16:54

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

Автор: Elfet 18.8.2005, 17:08

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

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

Автор: diam 18.8.2005, 20:41

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

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

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

Автор: Elfet 18.8.2005, 21:03

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

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

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

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

Автор: diam 23.10.2005, 00:56

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

.

Начнём.

Сразу же выложу http://dmk.sky.ru/?j=1, что бы понимали, о чём речь.
Логин: 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

(потом посмОтрите на http://dmk.sky.ru/?j=1, всё выглядит не так уж плохо 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, 01:43

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

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

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

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

Автор: Elfet 23.10.2005, 09:46

Ух ты!

Класс!

Автор: Sardar 23.10.2005, 14:02

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

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

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

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

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

Автор: diam 24.10.2005, 12:27

Цитата(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

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

Автор: Sardar 24.10.2005, 13:22

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

Автор: Guest 24.10.2005, 13:23

Не нашёл пока что описания функции .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

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

Автор: Гость_12345 24.10.2005, 17:24

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

Код


<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

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

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

Автор: Гость_12345 25.10.2005, 04:01

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>

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

Автор: Sardar 25.10.2005, 14:49

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

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

Автор: diam 26.10.2005, 17:12

Немного переписал выделение области картинки.
Сначала смотрим http://dmk.sky.ru/?j=3, потом http://dmk.sky.ru/?j=4 (выделенная область становится матовой). Вариант выделения, предложенный Sardar'ом, выложу чуть попозже

Автор: Sardar 27.10.2005, 02:44

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

Автор: diam 27.10.2005, 05:11

login: vingrad
password: vingrad

Автор: Sardar 27.10.2005, 11:02

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

Автор: diam 28.10.2005, 07:37

Вариант с обратной селекцией, предложенный Sardar'ом, http://dmk.sky.ru/?j=5.

Работает в 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) объявлены в глобальном контексте кода и доступны откуда угодно внутри документа.

Автор: Sardar 28.10.2005, 10:45

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

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

Автор: diam 28.10.2005, 10:59

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

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

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

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

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

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

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

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

Автор: diam 28.10.2005, 13:02

Ещё раз. Три варианта.
http://dmk.sky.ru/?j=3
http://dmk.sky.ru/?j=4
http://dmk.sky.ru/?j=5

http://dmk.sky.ru/?j=3
Никаких графических выделений области картинки. Просто нажимаем на кнопку мыши на картинке, водим мышкой по картинке, потом отпускаем кнопку. Внизу смотрим координаты верхней левой точки выделяемой области, её ширину, высоту.

http://dmk.sky.ru/?j=4
В дополнение к варианту N1 делает выделяемую область матовой.

http://dmk.sky.ru/?j=5
Отличается от варианта N2 инверсным выделением.

Автор: Гость_12345 28.10.2005, 14:39

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

Автор: Guest 28.10.2005, 15:11

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

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

Автор: Гость_12345 28.10.2005, 15:13

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

Автор: Гость_12345 11.11.2005, 15:41

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

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

Автор: chapchap 2.4.2006, 17:38

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

Автор: diam 7.4.2006, 14:35

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

Автор: chapchap 7.4.2006, 15:59

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