Нарисуйте прямоугольник над изображением - PullRequest
Новая
       2

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

1 голос
/ 22 февраля 2012

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

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

Ответы [ 2 ]

1 голос
/ 22 февраля 2012

Вы должны мне пиво за это: 

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

0 голосов
/ 22 февраля 2012

Получить координаты легко, при условии, что у вас есть резиновый элемент в переменной с именем 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...