Рисовать прямоугольник над изображением

Я делал проект для рисования прямоугольника над изображением и для нахождения координат прямоугольника. Я использовал JavaScript для написания этой программы.Рисовать прямоугольник над изображением

код у меня есть:

<style> 
    #rubberBand { 
    position: absolute; 
    visibility: hidden; 
    width: 0px; height: 0px; 
    border: 2px solid red; 
    } 
    </style> 

</HEAD> 
<BODY> 
<img name="myImage" id="myImage" src="a.jpg"> 


<DIV ID="rubberBand"></DIV> 

<SCRIPT> 

    var IMG; 

function startRubber (evt) { 
    if (document.all) { 

     var r = document.all.rubberBand; 
    r.style.width = 0; 
    r.style.height = 0; 
    r.style.pixelLeft = event.x; 
    r.style.pixelTop = event.y; 
    r.style.visibility = 'visible'; 
    IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image 
    } 
    else if (document.getElementById) { 
    // firefox 
    evt.preventDefault(); 
    var r = document.getElementById('rubberBand'); 
    r.style.width = 0; 
r.style.height = 0; 
    r.style.left = evt.clientX + 'px'; 
    r.style.top = evt.clientY + 'px'; 
    r.style.visibility = 'visible'; 
    r.onmouseup = stopRubber; 
    } 
    IMG.onmousemove = moveRubber; 
    } 
    function moveRubber (evt) { 
    if (document.all) { // IE 
    var r = document.all.rubberBand; 
r.style.width = event.x - r.style.pixelLeft; 
r.style.height = event.y - r.style.pixelTop; 
    } 
    else if (document.getElementById) { // firefox 
    var r = document.getElementById('rubberBand'); 
    r.style.width = evt.clientX - parseInt(r.style.left); 
    r.style.height = evt.clientY - parseInt(r.style.top); 
    } 
    return false; // otherwise IE won't fire mouseup :/ 
    } 
function stopRubber (evt) { 
IMG.onmousemove = null; 
    } 

    function cancelDragDrop() 
    { 
    window.event.returnValue = false; 
    } 

    IMG = document.getElementById('myImage'); 
    IMG.onmousedown = startRubber; 
    IMG.onmouseup = stopRubber; 

    </SCRIPT>

Как я могу отобразить координаты прямоугольника в виде (x1,y1)(x2,y2). Это верхняя левая и правая координаты, а последняя слева и справа.

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

источник

2012-02-22 Vineeth

рассмотреть возможность использования некоторые яваскрипта рамки, как JQuery, Mootools или STH ... Это делает жизнь намного проще. – zeroos

Как это отличается от двух последних вопросов, которые вы задали? http://stackoverflow.com/questions/9397104/javascript-for-draw-rectangle-over-a-image и http://stackoverflow.com/questions/9383337/drag-and-draw-rectangles-on-an- image-in-javascript – j08691

Получение координат легко, если вы имеете резиновый элемент в переменном с именем rectangle:

var x1 = rectangle.style.left; 
var y1 = rectangle.style.top; 
var x2 = x1 + rectangle.style.width; 
var y2 = y1 + rectangle.style.height;

Если вы хотите, чтобы отобразить их на странице в формате вы указали, попробуйте следующее (если вы есть выходной элемент с идентификатором output:

var coords = '(' + x1 + ',' + y1 + ')(' + + x2 + ',' + y2 + ')'; 
document.getElementById('output').innerHTML = coords;

источник

2012-02-22 16:31:47 beeglebug

Где я добавляю этот код .. – Vineeth

** Длинный ответ (если вам интересно): ** Дайте, чтобы координаты менялись каждый раз, когда мышь перемещается, логическое место находится внутри вашей существующей функции 'onmousemove' (moverubber), таким образом, координаты всегда будут обновляться при перемещении коробки. ** Короткий ответ (если вы просто хотите скопировать/вставить): ** Поместите его непосредственно перед возвратом false в moverubber. – beeglebug

вы вроде обязаны мне пиво для этого:

var IMG, rubber, pt = { x: 0, y: 0 }; 

function startRubber (evt) { 
    var ev = evt || window.event, 
     rs = rubber.style, 
     bb = IMG.getBoundingClientRect(); 
    console.dir(ev); 
    rs.left = bb.left + 'px'; 
    rs.top = bb.top + 'px'; 
    rs.width = bb.width + 'px'; 
    rs.height = bb.height + 'px'; 
    rs.display = 'block'; 
    pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top }; 
    return false; 
} 

function stopRubber() { 
    rubber.style.display = 'none'; 
} 

function moveRubber (evt) { 
    var ev = evt || window.event; 
    rubber.style.left = (evt.clientX - pt.x) + 'px'; 
    rubber.style.top = (evt.clientY - pt.y) + 'px'; 
} 

rubber = document.getElementById('rubberBand'); 

IMG = document.getElementById('myImage'); 

IMG.onmousedown = startRubber; 
document.onmouseup = stopRubber; 
document.onmousemove = moveRubber;

стендовое: http://jsbin.com/ojaxew/edit

надеюсь, что это помогает -ck

источник

2012-02-22 16:33:47 ckozl

Рисовать прямоугольник над изображением

ответ

Смежные вопросы