0
我正在研究一個項目，在該項目中，我拍攝一箇中心的谷歌地圖圖像，然後拍攝圖像的座標以創建我自己的交互式地圖。到目前爲止，我已將地圖圖像作爲畫布，我可以點擊它獲取座標，並且可以通過兩次點擊畫出一條線。HTML畫布用鼠標單擊繪製圖像，保存座標但不提交
但是我想單擊單位的每個角落到： 1 - 獲取每個角的座標 2 - 在每個點之間繪製一條線以在原始圖像的頂部繪製周邊。
我的問題是我點擊一個點獲得座標，然後點擊另一個點，而在兩者之間繪製一條線（這是正確的）原始座標被新的座標覆蓋，這可以防止我從永遠不必上顯示
這裏不止一個畫線下面的代碼：
HTML：
<body>
@using (Html.BeginForm("Index", "DB", FormMethod.Post))
{
<div id="container">
<div id="main">
<h2>Coordinates</h2>
@Html.ValidationSummary()
<div id="table-cnt2" style="overflow: auto">
<table id="coordinates">
<tr>
@*<th>Level</th>*@
<th>Unit Number</th>
<th>Co-ordinate Order</th>
<th>X Co-ordinates</th>
<th>Y Co-ordinates</th>
</tr>
<tr style="background-color: grey">
<td>@Html.DropDownListFor(x => x.NewShoppingCenterUnitCoordinate.ShoppingCenterUnitId, new SelectList(Model.Units, "ShoppingCenterUnitId", "ShoppingCenterUnitId", Model.NewShoppingCenterUnitCoordinate.ShoppingCenterUnitId), new {onchange = "resetOrderToOne()"})</td>
<td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.Ordered)</td>
<td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.x)</td>
<td>@Html.TextBoxFor(x => x.NewShoppingCenterUnitCoordinate.y)</td>
</tr>
@for (int i = 0; Model.Coordinates.Count > i ; i++)
{
//testing
<tr>
<td>@Html.DropDownListFor(x => x.Coordinates[i].ShoppingCenterUnitId, new SelectList(Model.Units, "ShoppingCenterUnitId", "ShoppingCenterUnitId", Model.Coordinates[i].ShoppingCenterUnitId))</td>
<td>@Html.TextBoxFor(x => x.Coordinates[i].Ordered)</td>
<td>@Html.TextBoxFor(x => x.Coordinates[i].x)</td>
<td>@Html.TextBoxFor(x => x.Coordinates[i].y)</td>
</tr>
}
</table>
</div>
<input type="button" value="Save" onclick="getCursorPosition(e)"/>
<input type="submit" value="Save"/>
</div>
<div id="map">
<canvas id="canvas" width="900" height="800"></canvas>
<img id="image" src="~/Content/images/map.png" style="display: none" />
</div>
<div class="clear-both"></div>
</div>
}
</body>
的JavaScript：
(function($, window, document) {
var clicks = 0;
var lastClick = [0, 0];
$("#canvas").on("click", function (e) {
console.log('click');
var posArr = getCursorPosition(e);
console.log(posArr);
drawLine(posArr);
});
function getCursorPosition(e) {
var xPos;
var yPos;
if (e.pageX != undefined && e.pageY != undefined) {
xPos = parseInt(e.pageX - $('#canvas').offset().left),
yPos = parseInt(e.pageY - $('#canvas').offset().top);
$("#NewShoppingCenterUnitCoordinate_x").val(xPos);
$("#NewShoppingCenterUnitCoordinate_y").val(yPos);
$('#canvas').closest("form").save();
} else {
xPos = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
yPos = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [xPos, yPos];
}
function drawLine(posArr) {
var context = document.getElementById('canvas').getContext('2d');
console.log(context);
var x = posArr[0],
y = posArr[1];
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
//$(this).closest("form").submit();
})(window.jQuery, window, document)