<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>矩形繪制工具</title>
<style type="text/css"> .box { background: #f00; width: 0px; height: 0px; position: absolute; opacity: 0.5; cursor: move; } .droptarget { float: left; width: 100px; height: 1000px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } </style>
</head>
<body>
<h1>標注窗口</h1>
<script>//框內移動顯示坐標 function cnvs_getCoordinates(e) { x=e.pageX-e.target.offsetLeft;//不能用clientX,pageX為文檔坐標,clientX表示瀏覽器界面坐標,會隨滾動條改變 y=e.pageY-e.target.offsetTop; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates()//出框后不顯示坐標 { document.getElementById("xycoordinates").innerHTML=""; } </script>
<div id="coordiv" style="{{ style }}" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()" >
<img src="{{ img_src }}" ondragstart="return false;" >
<script type="text/javascript"> console.log('=========') window.onload = function(e) { e = e || window.event; // startX, startY 為鼠標點擊時初始坐標 // diffX, diffY 為鼠標初始坐標與 box 左上角坐標之差，用於拖動 var startX, startY, diffX, diffY; // 是否拖動，初始為 false var dragging = false; var coordiv = document.getElementById('coordiv'); // 鼠標按下 document.onmousedown = function(e) { startX = e.pageX; startY = e.pageY; // 如果鼠標在 box 上被按下,坐標判定防止在box之外 if(startY<=coordiv.offsetTop+coordiv.offsetHeight && startY>=coordiv.offsetTop && startX>=coordiv.offsetLeft && startX<=coordiv.offsetLeft+coordiv.offsetWidth) { if(e.target.className.match(/box/)) { // 允許拖動 dragging = true; // 設置當前 box 的 id 為 moving_box if(document.getElementById("moving_box") !== null) { document.getElementById("moving_box").removeAttribute("id"); } e.target.id = "moving_box"; // 計算坐標差值 diffX = startX - e.target.offsetLeft; diffY = startY - e.target.offsetTop; } else { // 在頁面創建 box var active_box = document.createElement("div"); active_box.id = "active_box"; active_box.className = "box"; active_box.style.top = startY + 'px'; active_box.style.left = startX + 'px'; active_box.setAttribute("ondrop","drop(event)"); active_box.setAttribute("ondragover","allowDrop(event)"); document.body.appendChild(active_box); active_box = null; } } }; // 鼠標移動 document.onmousemove = function(e) { if(e.pageY <= coordiv.offsetTop+coordiv.offsetHeight && e.pageY >= coordiv.offsetTop && e.pageX >= coordiv.offsetLeft && e.pageX <= coordiv.offsetLeft+coordiv.offsetWidth) { // 更新 box 尺寸 if(document.getElementById("active_box") !== null)//如果document中有active_box,就改變box大小 { var ab = document.getElementById("active_box"); ab.style.width = e.pageX - startX + 'px'; ab.style.height = e.pageY - startY + 'px'; } // 移動，更新 box 坐標 if(document.getElementById("moving_box") !== null && dragging) { var mb = document.getElementById("moving_box"); var xy_div = document.getElementById(mb.style.left.substring(0,mb.style.left.length-2)+mb.style.top.substring(0,mb.style.top.length-2)); var tmx = e.pageX - diffX; var tmy = e.pageY - diffY; if(tmx + mb.offsetWidth <= coordiv.offsetLeft+coordiv.offsetWidth && tmx >= coordiv.offsetLeft && tmy + mb.offsetHeight <= coordiv.offsetTop+coordiv.offsetHeight && tmy >= coordiv.offsetTop) { mb.style.top = e.pageY - diffY + 'px'; mb.style.left = e.pageX - diffX + 'px'; if(xy_div !== null) { var new_x = mb.style.left.substring(0, mb.style.left.length - 2); var new_y = mb.style.top.substring(0,mb.style.top.length - 2); xy_div.id = new_x+new_y; new_x-=coordiv.offsetLeft; new_y-=coordiv.offsetTop; var new_r = parseInt(mb.style.width.substring(0,mb.style.width.length-2))+parseInt(new_x)-coordiv.offsetLeft; var new_b = parseInt(mb.style.height.substring(0,mb.style.height.length-2))+parseInt(new_y)-coordiv.offsetTop;//"[ left: "+ new_x +", top: "+ new_y + ", right: " + new_r +" , bottom: "+ new_b +" ]"; xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b; var input_div = document.getElementById("x_y") input_div.value=xy_div.innerHTML } } } } }; // 鼠標抬起 document.onmouseup = function(e) { // 禁止拖動 dragging = false; if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.removeAttribute("id"); // 如果長寬均小於 3px，移除 box if(ab.offsetWidth < 10 || ab.offsetHeight < 10) { document.body.removeChild(ab); } if(ab.offsetHeight >=10 && ab.offsetHeight >=10) { var xy_div = document.createElement("div"); xy_div.id=startX.toString()+startY.toString(); document.body.appendChild(xy_div); xy_div.innerHTML = (startX-coordiv.offsetLeft) + "," + (startY-coordiv.offsetTop) + "," + (e.pageX-coordiv.offsetLeft) + "," + (e.pageY-coordiv.offsetTop); var input_div = document.getElementById("x_y") input_div.value=xy_div.innerHTML } } }; //雙擊鼠標 document.ondblclick = function (e) { if(e.target.className.match(/box/)) { if (document.getElementById("del_box") !== null) { document.getElementById("del_box").removeAttribute("id"); } e.target.id = "del_box"; var ab = document.getElementById("del_box"); var xy_div = document.getElementById(ab.style.left.substring(0,ab.style.left.length-2)+ab.style.top.substring(0,ab.style.top.length-2)) if(xy_div !== null) { xy_div.removeAttribute("id"); document.body.removeChild(xy_div); } document.body.removeChild(ab); } } }; </script>
</div>
<br>
<form method="POST">
<input type="text" name="location" placeholder="座位"><br>
<input type="text" name="coor" placeholder="坐標" readonly="true" id="x_y" style="width: 800px"><br>
<input type="submit" value="提交坐標">
</form>
<script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } </script>
<div id="xycoordinates"></div>
</body>
</html>
JavaScript 在網頁上的圖片中畫矩形框,並得到實時對角坐標
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。