如何解决用鼠标创建画布并保存坐标?
我是画布的新手,我真的不知道该怎么做。 我想要做的是创建一个画布,其中有一张图像可以加载并能够绘制矩形并将每个矩形的坐标保存在某个数组中,然后将其保存在bbdd中。 正如我在图片中所示,这个想法或多或少是这样的。 您可以选择一个矩形并将其删除,以防万一我在绘制时犯了一个错误?
我将对如何使用它的一些想法表示感谢。
解决方法
由于您需要在单个矩形上添加点击事件,因此如果您使用div容器而不是画布来绘制框,则会更容易。
将图像位置设置为绝对(在左上角位置),然后在所有方框中重复以显示矩形。
<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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。