下面是有个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>
以上就是VML画图
- 大小: 146.8 KB
分享到:
相关推荐
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题
百度地图中动态画线, 也可以自己变通从数据库里面获取动态的点之后进行画线
C#_CAD二次开发_批量将多段线Polyline转化为样条曲线Spline(代码)
本资源为VS2005下C++开发的ARX工程源文件,本程序实现了将直线(line)、圆弧(arc)、多段线(Polyline)合并成多段线(Polyline)。算法很值得学习
Java的距离折线标记计算距折线和标记的距离入门您可以直接使用Java计算标记和折线之间的距离跑步请按照以下步骤调用主函数BdcInit bdcInit = new BdcInit();Double total = bdcInit.bdccGeoDistanceToPolyMtrs...
C#_CAD二次开发_快速选择dwg中的所有多段线Polyline和样条曲线Spline.cpp(两个函数)
Cesium 用Entity绘制polyline,如果使用CallbackProperty方法进行动态绘制,depthFailMaterial属性将失效。 从官方github上的issue找了替代的方法。 动态Primitive线的绘制 // 绘制方法 this._...
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/122121747
spline2polyline.lsp 在ACAD可通过ap命令加载应用,执行命令:spl2pol
宣传单张用于标记动画的插件。 受到启发查看。 反馈赞赏描述沿折线以特定速率(米/秒)移动标记。 当鼠标悬停在标记上时停止,并在鼠标移出时重新开始。 在路径末尾,标记会在反向路径中重新启动。 如果页面不可见,...
walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path,line 和 polyline元素。walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果。
易语言API画曲线源码,API画曲线,GetDC,GetClientRect,MoveToEx,LineTo,Polyline,ReleaseDC
地图工具使用WKT和PolyLine格式绘制几何图形的简单工具。 演示站点: : *几何变换将很快添加!
tree-polyline.html
C#仿CAD绘制多段线 可自由灵活修改绘制需求和定制样式
an algorithm to offset a polyline, the same funtion you can see in AutoCAD, command offset.
draw
leaflet绘制带箭头的线条(polyline)
flex实现高亮闪烁显示polyline flex实现高亮闪烁显示polyline
::Polyline(hdc,PT,3); ::MoveToEx(hdc,100,240,NULL); ::LineTo(hdc,130,200); EndPaint(hwnd,&ps); DeleteObject(hP); DeleteObject(hB); break; case WM_DESTROY: ...