v:polyline jsp画标记线

330546494

浏览: 71155 次

最近访客更多访客>>

zdyk

shun_liu

jwcgxj

q212212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

下面是有个2张并排的图片（用的struts1），然后从数据库中搜出相应图片的标记然后根据标记画出线。数据库存的坐标的样子为：

503,815;504,815;505,815;506,815;507,815;508,815;509,815;510,815;511,815;512,815;513,815;514,815;

515,815;516,815;517,815;471,803;472,803;473,803;474,804;475,804;476,804;477,805;478,805;479,806;

480,806;481,806;482,807;483,807;484,807;485,808;486,808;487,809;488,809;489,809;490,810;491,810;

492,810;493,811;494,811;495,812;496,812;497,812;498,813;499,813;500,813;501,814;502,814;503,815;

444,780;445,780;446,781;447,782;448,783;449,784;450,785;451,785;452,786;453,787;454,788;455,789;

456,790;457,791;458,791;459,792;460,793;461,794;462,795;463,796;464,797;465,797;466,798;467,799;

468,800;469,801;470,802;471,803;428,753;428,754;429,755;429,756;430,757;430,758;431,759;432,760;

432,761;433,762;433,763;434,764;435,765;435,766;436,767;436,768;437,769;438,770;438,771;439,772;

然后取出第一张图片的标记（一张图片可以有多个标记，多个标记放到一个集合里。）.结果为下图。两图取得标记都是第一个图的标记。

<body>
  <style>
    #pic1Td{border-width:0px;}
    v\:* { behavior: url(#default#VML);}
   html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
   }
	</style>
<html:form action="/saveNotesByAutomaticHand">
  <table>
  <tr>
  <td id="pic1Td">
  	<div id="pic1Div">
    <img  id="pic1" style="z-index:2;position:absolute;top:0;" src='/file/<bean:write name="alertForm" property="previousPic.fullName"/>' alt="图片处理" hspace="0" usemap="#newbook" border="0" onclick="return false;">
  	</div>
  </td>
  <td>  
    <img  id="pic2" style="z-index:2;position:absolute;top:0;" src='/file/<bean:write name="alertForm" property="detail.fullName"/>' alt="图片处理" hspace="0" usemap="#newbook" border="0" onclick="return false;">
  </td>
  </tr>
  <!-- onclick="writearea(event.offsetX,event.offsetY)" -->
  </table>
  <table id="table2" width="100%" style="position:absolute;">
  	<tr>
  		<td>
  			<div id="previoustime"></div>
  		</td>
  		<td>
  			<div id="filetime"></div>
  		</td>
  	</tr>
  	<tr>
  	<td colspan="2">
  		<textarea rows="2" id="textid" style="width:900" name="notes"></textarea>
  		<!-- <input type="text" id="areatext"/> -->
  	</td>
  	</tr>
  	<tr>
  	<td colspan="2" align="center">
  		<html:submit>保存备注</html:submit>
  	</td>
  	</tr>
  </table>
  <input type="hidden" name="notesFileNmae" value='<bean:write name="alertForm" property="detail.fileName"/>'>
  <div id="showAllArea"></div>
  <script>

  //function writearea(x,y)
	//{
//		document.getElementById("areatext").value +=x+","+y+";";
//	}
 	var WindowWidth = document.body.clientWidth;
	var windowHeight = document.body.clientHeight;
	document.getElementById("pic1").width=WindowWidth/2-40;//根据屏幕设置图片的宽度
	document.getElementById("pic1").height=(document.getElementById("pic1").width)*0.75;//根据屏幕设置图片的高度
	document.getElementById("pic1Td").width=WindowWidth/2;
	document.getElementById("pic1Div").width=WindowWidth/2;
	document.getElementById("pic2").width=WindowWidth/2-40;
	document.getElementById("table2").style.top=((document.getElementById("pic1").width)*0.75)+10;//这个是下面的文本框，和画图没什么关系
	document.getElementById("textid").style.width=WindowWidth-10;
                //下面这些也和画图无关
	var previousname = '<bean:write name="alertForm" property="previousPic.fileName"/>';
	var previoustime = previousname.substr(5,4)+"年"+previousname.substr(9,2)+"月"+previousname.substr(11,2)+"日"+previousname.substr(13,2)+"时"+previousname.substr(15,2)+"分"+previousname.substr(17,2)+"秒";
	document.getElementById("previoustime").innerText = previoustime;
	var filename = '<bean:write name="alertForm" property="detail.fileName"/>';
	var filetime = filename.substr(5,4)+"年"+filename.substr(9,2)+"月"+filename.substr(11,2)+"日"+filename.substr(13,2)+"时"+filename.substr(15,2)+"分"+filename.substr(17,2)+"秒";
	document.getElementById("filetime").innerText = filetime;
  </script>
//从这里开始和画图有关，循环出标记，然后对每一个标记进行画入
  <logic:notEmpty name="alertForm" property="alertinfos">
  	<logic:iterate  name="alertForm" property="alertinfos" id="info" scope="request"> 
  	
  	<v:polyline style="z-index:1;left:0;position:absolute;top:0" points='<bean:write name="info" property="markArea"/>' filled="f" strokecolor="#B23AEE" strokeweight="4" ></v:polyline>
  	<script>
	var pictureWidth=WindowWidth/2-20;//这个是1个图片的宽度
	var pictureHeight=pictureWidth*0.75;
  	var previousArea = '<bean:write name="info" property="markArea"/>';
	var pointStr = "";
	var secondpointStr = "";
	var points = previousArea.split(";");//分解标记坐标，取出每一个长宽高
	var pointCoord;
	var pointx;
	var pointy;
                //循环出一个标记的坐标，然后对每一个坐标进行画，然后这些画出来的点连成线就成了标记
	for (var pointFor = 0;pointFor < points.length;pointFor++)
	{
		pointCoord = points[pointFor].split(",");
		if(pointCoord == '') continue;
			pointx = pointCoord[0]/<bean:write name="info" property="screenWidth"/>*pictureWidth;//取出图片变了分辨率后的相应的横坐标，如果上面的图片的分辨率没有变，那么横坐标就为pointCoord[0]。
			pointy = pointCoord[1]/<bean:write name="info" property="screenHeight"/>*pictureHeight;//取出纵坐标
			pointStr+=pointx+","+pointy;//然后把坐标拼起来，最后要拼成我上面发的那些数字的形态。
			pointStr +=",";
			secondpointStr+=(pointx+pictureWidth+20)+","+pointy;//这个是第二张图的坐标，横坐标要加上两图相差的距离
			secondpointStr +=",";//然后进行连接，也是拼成我上面发的那些数字的形态。
	}
	pointCoord = points[0].split(",");
	pointx = pointCoord[0]/<bean:write name="info" property="screenWidth"/>*pictureWidth;
	pointy = pointCoord[1]/<bean:write name="info" property="screenHeight"/>*pictureHeight;
	pointStr+=pointx+","+pointy;
	secondpointStr+=(pointx+pictureWidth+20)+","+pointy;
                //在这里<v:polyline>是画出标记。
	showAllArea.innerHTML +='<v:polyline style="z-index:3;left:0;position:absolute;top:0" points='+pointStr+' filled="f" strokecolor="red" strokeweight="1" ></v:polyline>';
	showAllArea.innerHTML +='<v:polyline style="z-index:3;left:0;position:absolute;top:0" points='+secondpointStr+' filled="f" strokecolor="red" strokeweight="1" ></v:polyline>';
	
  </script>	
  	</logic:iterate>
  </logic:notEmpty>
  </html:form>
  </body>