Javascript: вычисляем текущие координаты курсора на картинке

Задача состоит в том, чтобы выполнять навигацию по картинке, перетаскивая по ней точку-курсор и отмечая некие координаты в пикселях, которые потом можно использовать, например, как опорные точки для обработки изображения. Отслеживание координат выполняется не "вручную" как здесь и без ухищрений с правильным позиционированием мыши как в рисовалке отсюда, но просто с помощью старой доброй JQuery.

Всю проблему можно решить за 4 лёгких шага.

1. Подключить локально или с внешнего сайта (как в примере) библиотеки JQuery и JQuery UI.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
 rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

2. Создать и добавить в документ стили для раздела с картинкой (img-wrap), для курсора (point) и для позиционирования точки или точек (point-1, point-2, ..., у нас одна точка).

<style>
.img-wrap {
 border: 1px solid #ddd;
 margin: 0 auto; /* раздел будет по центру */
 padding: 0;
 width: 128px;
 height: 128px; /* по нужному размеру картинки */
 position: relative;
}
.point {
 display: inline-block;
 width: 18px;
 height: 18px;
 line-height: 18px;
 background: blue; /* цвет точки */
 border-radius: 9px; /* половина размера точки */
 cursor: move;
 position: absolute;
}
#point-1 { /* начальное положение точки на картинке */
 left: 50px;
 top: 50px;
}
</style>

3. Добавить разметку HTML.

<div class="img-wrap">
 <img src="http://blog.kislenko.net/pictures/54.gif" width="128" height="128" alt="">
 <a class="point" id="point-1" href="#"></a>
</div>
<p style="text-align: center;">
 x=<span id="x1">50</span>, y=<span id="y1">50</span>
</p>

4. Добавить обработчик draggable для элементов point-1, point-2, ... .

<script>
 $(function(){
  $("#point-1").draggable({
   containment: ".img-wrap", 
   scroll: false,
   drag: function(event, ui){
    var pos = ui.position;
    $("#x1").text(pos.left + 9); //+ половина размера точки
    $("#y1").text(pos.top + 9);
   }
  });
/*
  $("#point-2").draggable({
   //если есть вторая точка, здесь будет обработчик для неё
  });
*/
 });
</script>

Последовательно поместив все фрагменты в документ .html получим вот что:

x=50, y=50

Подведя курсор к синей точке так, чтобы он принял форму "прицела", мы можем перетаскивать точку по картинке и видеть текущие координаты под ней.

В дальнейшем можно просто брать нужные координаты из элементов с идентификаторами x1, y1 и выполнять с ними нужные расчёты.

Можно сделать из этого и такой полином, и ещё много чего.

10.09.2022, 13:42 [429 просмотров]