下面是有个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" οnclick="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" οnclick="return false;">
</td>
</tr>
<!-- οnclick="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>以上就是VML画图
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
