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>