用鼠标创建画布绘制并保存坐标？答案

【问题标题】：Create a canvas draw with mouse and save coordinates?用鼠标创建画布绘制并保存坐标？
【发布时间】：2020-08-26 04:22:31
【问题描述】：

我是 canvas 新手，我真的不知道该怎么做。我想要做的是创建一个画布，其中有一个加载图像并能够绘制矩形并将每个矩形的坐标保存在某个数组中，然后将其保存在 bbdd 中。正如我在图像中显示的那样，这个想法或多或少是这样的。您可以选择其中一个矩形并将其擦除，以防我在绘制时出错？

我会很感激一些关于如何做到这一点的想法。

这是example video

【问题讨论】：

标签： javascript canvas

【解决方案1】：

由于您需要在单个矩形上添加点击事件，如果您使用 div-containers 而不是画布会更容易来绘制框。

将图像位置设置为绝对位置（在左上角）并遍历所有框以显示矩形。

<div class="image-app-container" style="position: relative">
  <img src="..." style="position: absolute; top: 0, left: 0">

  // Iterate through the all the boxes, I'm using react JSX code here
  {boxes.map(box => {
     return <div 
       style={{"position": "absolute", "top": box.top, "left": box.left, "border": "2px solid darkred"}}
       onClick= {this.selectBox} //selectBox function saves the clicked box info
       />
   })  
  }

</div>

选择矩形后，您可以更新/删除其大小或位置。

要添加新框，在容器 div 上添加点击处理程序

var c = document.querySelector('.image-app-container');
var handleClick =  (e) => {
  // Calculate position coordinates using e.clientX &  e.clientY values
  // Add the box with positions to your current list
}
c && c.addEventListener('click', handleClick)

【讨论】：

非常感谢，所以您评论我应该在图像上使用 div，但是我该如何移动这些矩形或更改大小（div）？
我更喜欢使用 div，因为我记得在使用画布/图像映射时遇到了一些问题。如果要捕获拖放事件，逻辑将类似于上面的代码 - 您需要为 mousedown、mousemove 和 mouseup 添加事件处理程序。查看此页面：stackoverflow.com/questions/6042202/…
感谢您的推荐，我需要搜索一下以在拖动图像时捕获 div 的坐标。例如：