我想做一个面积计算工具。所以我卡在了某个区域[关闭]

Question

我尝试制作工具来进行面积测量。我做了类似的东西，这是代码。所以我想要获得两点之间的距离并通过鼠标单击将一个点添加到另一个点。

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <input
         type="file"
         id="imgFile"
         accept="image/png, image/gif, image/jpeg"
         name="myfile"
         style="display: block"
         />
      <img src="" id="image" />
      <canvas
         id="myCanvas"
         width="1920"
         height="720"
         style="border: 1px solid #000"
         ></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const ctx = canvas.getContext("2d");
         let isDrawing = false;
         let lastX = 0;
         let lastY = 0;
         
         canvas.addEventListener("click", (e) => {
           isDrawing = true;
           lastX = e.offsetX;
           lastY = e.offsetY;
           ctx.arc(lastX, lastY, 5, 0, 2 * Math.PI, false);
           ctx.stroke();
           console.log("lastX", lastX, " ", "lastY", lastY);
         });
         
         canvas.addEventListener("mousedown", (e) => {
           if (isDrawing) {
             const currentX = e.offsetX;
             const currentY = e.offsetY;
             ctx.beginPath();
             ctx.moveTo(lastX, lastY);
             ctx.lineTo(currentX, currentY);
             ctx.beginPath();
             ctx.arc(lastX, lastY, 5, 0, 2 * Math.PI);
             ctx.arc(currentX, currentY, 5, 0, 2 * Math.PI, false);
             ctx.fillStyle = "red";
             ctx.fill();
             
             ctx.fillStyle = "#FF0000";
             ctx.font = "15px Verdana";
             ctx.fillText(currentX + "ft", currentX , currentY);
             ctx.strokeStyle = "#ff0000";
             
             ctx.stroke();
             lastX = currentX;
             lastY = currentY;
         
             console.log("currentX", currentX, " ", "currentY", currentY);
           }
         });
         
         canvas.addEventListener("mouseleave", () => {
           isDrawing = false;
         });
         
         function getLocation() {
           if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition);
           } else {
             x.innerHTML = "Geolocation is not supported by this browser.";
           }
         }
         
         function showPosition(position) {
          
             
         
             var google_tile =
           "http://maps.google.com/maps/api/staticmap?sensor=false&center=" +
           position.coords.latitude +
           "," +
           position.coords.longitude +
           "&zoom=20&size=800x800&maptype=satellite&markers=color:blue|label:U|" +
           position.coords.latitude +
           "," +
           position.coords.longitude +
           "&key=AIzaSyDzlqyJALBpIsn92RGlZd9j_0o-tKQaUbE&format=png&visual_refresh=true";
         
         var imageObj = new Image();
         imageObj.src = google_tile;
         console.log(google_tile)
         imageObj.onload = function () {
           ctx.drawImage(imageObj, 0, 0);
         };
         }
         window.addEventListener("load",function(){
         getLocation()
         })
         
      </script>
   </body>
</html>

结果是

我想更喜欢 roofr.com

请给我一些想法和建议。告诉我是否有可用的工具和插件

我想做一个面积计算工具。所以我卡在了某个区域[关闭]

问题描述投票：0回答：0

最新问题

我想做一个面积计算工具。所以我卡在了某个区域[关闭]

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0