JavaScript: Выделение областей изображения/секции

Question

Я хочу, чтобы создать простой JSP код/​​сервлета который должен иметь следующее:

1) Дисплей изображения, имеющее различные секции. Например: карта страны.

2) Разрешить пользователю отмечать разделы этого изображения с помощью перетаскивания мышью. По мере того, как пользователь продолжает перетаскивать мышь, область становится оверлейной с другим цветом.

3) Когда пользователь перемещает мышь, координаты x и y на изображении также должны быть рассчитаны. [Эта функция, однако, не является обязательной.]

Цель этого приложения - отметить разные «зоны» в изображении, которые будут сохранены в базе данных вместе с их координатами x-y.

Может кто-нибудь предложить вам, как этого достичь? Есть ли доступная библиотека/API, которая может быть полезна?

С уважением,

Answer 1

Вот отрывок, чтобы ты. Замените текстовую настройку div#server кодом для отправки координат на ваш сервер. Я оставлю фоновое изображение для холста и других важных вещей до вас.

var c = $("#map"); 
 
var ctx = c[0].getContext("2d"); 
 
var down = [0, 0]; 
 
var bound = c[0].getBoundingClientRect(); 
 

 
c.mousedown(function(e) { 
 
    down = [e.clientX - bound.left, e.clientY - bound.top]; 
 
}); 
 

 
c.mouseup(function(e) { 
 
    var rect = [ 
 
    down[0], 
 
    down[1], ((e.clientX - bound.left) - down[0]), ((e.clientY - bound.top) - down[1]) 
 
    ]; 
 
    ctx.fillStyle = "#bbbbbb"; 
 
    ctx.fillRect(rect[0], rect[1], rect[2], rect[3]); 
 
    $("#server").text("Send: " + rect); 
 
});

body { 
 
    background-color: lightblue; 
 
} 
 
#map { 
 
    background-color: white; 
 
    cursor: crosshair; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id="map" width="256" height="256"></canvas> 
 
<div id="server"></div>