Question

我想创建一个简单的jsp / servlet代码，它应具有以下内容：

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>

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

1 个答案: