javascript：突出显示图像区域/部分

Question

我想创建一个简单的jsp / servlet代码，其中应包含以下内容：

1）显示具有不同部分的图像。 例如：一张国家地图。

2）允许用户使用鼠标拖动在此图像上标记部分。 随着用户不断拖动鼠标，该区域将被覆盖以某种不同的颜色。

3）随着用户移动鼠标，还应该计算图像上的x和y坐标。 [但是此功能是可选的。]

此应用程序的目的是在图像中标记不同的“区域”，这些区域将与它们的xy坐标一起保存在数据库中。

有人可以建议如何实现吗？ 是否有可用的库/ 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>