JavaScript实现图片上标记多点区域

最新推荐文章于 2024-07-26 02:52:20 发布

Jy丶Elean

最新推荐文章于 2024-07-26 02:52:20 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： javacript 图片标记区域坐标

本文链接：https://blog.csdn.net/LiJi19910313/article/details/46375811

版权

这篇博客介绍了一种使用JavaScript实现的方法，让用户能在图片上标记多个点，并通过这些点来创建区域。通过监听图片的双击事件，获取坐标并创建标记点，再通过连线函数将点连成多边形，实现对图片的自由标注。同时，提供了清除标记的功能，便于用户重新绘制。示例代码展示了如何进行点的标记、连线以及多边形的绘制，涉及的技术包括DOM操作、事件监听以及简单的几何计算。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试图片标记</title>
<style type="text/css">
#container{
position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden;
}
#map{
position:absolute;
}
.mark{
position:absolute; width:2px; height:2px; font-size:0px; background:#FF0000;
}
</style>
<script type="text/javascript">
var mark = [];

function $(id){
return document.getElementById(id);
}
//获取点坐标
function getOffset(obj){
var x = 0, y = 0;
while(obj){
x += obj.offsetLeft;
y += obj.offsetTop;

obj = obj.offsetParent;
}
return {x : x, y : y };
}
//新增div
function addMark(p, x, y, index){
var div = document.createElement("div");
div.id = "mark" + index;
div.className = "mark";
div.style.left = x + "px";
div.style.top = y + "px";
p.appendChild(div);
}

//删除两坐标之间连线
function clearMarkXY(x1,y1,x2,y2){
var container = $("container");
var start=0,end=0;
for(var i=0; i<mark.length; i++){
if(mark[i].split(",")[0]==x1&&mark[i].split(",")[1]==y1){
start=mark[i].split(",")[2];
}
if(mark[i].split(",")[0]==x2&&mark[i].split(",")[1]==y2){
end=mark[i].split(",")[2];
}
}
end=parseInt(end);
for(var i=end+1; i<mark.length-1; i++){
container.removeChild($("m