vml 实现 WEB topo原型(3)-设备

最新推荐文章于 2017-04-18 08:46:10 发布

laputa73

最新推荐文章于 2017-04-18 08:46:10 发布

阅读量785

点赞数

分类专栏： web编程文章标签： web javascript image function path behavior

本文链接：https://blog.csdn.net/laputa73/article/details/5360784

版权

web编程专栏收录该内容

54 篇文章 0 订阅

订阅专栏

实现2个功能：用图片表示设备，可以拖动

功能1是vml本身的功能

功能2则需要结合js事件

另外，基于重用和封装的考虑，把vml元素的创建也封装为js函数，则样便于以后动态生成。

主页面

Dev1.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 设备 </title> </head> <mce:script type="text/javascript" language="javascript" src="./js/createNE.js" mce_src="./js/createNE.js"></mce:script> <mce:script type="text/javascript" language="javascript" src="./js/moveObj.js" mce_src="./js/moveObj.js"></mce:script> <html xmlns:v="urn:schemas-microsoft-com:vml"> <STYLE> v/:* { BEHAVIOR: url(#default#VML) } </STYLE> <body bgcolor="#ffffff"> </body> </html>  <mce:script type="text/javascript" language="javascript"></mce:script> </html>

相关的js

createNE.js

//1.底层函数 //创建一个group function createGroup(identifer,top,left,width,height){ var group=document.createElement("v:group"); group.id=identifer; group.title=name; group.style.position="absolute"; group.style.zIndex="2"; group.style.width=width; group.style.height=height; group.style.top=top; group.style.left=left; group.coordsize=width+","+height; //移动的相关事件 group.attachEvent("onmousedown",down); group.attachEvent("onmousemove",move); group.attachEvent("onmouseup",up); return group; } //创建一个图片 function createImage(top,left,width,height,imageSrc){ var image=document.createElement("v:image"); image.src=imageSrc; image.style.zIndex="2"; image.style.width=width; image.style.height=height; image.style.top=top; image.style.left=left; image.stroked="f"; return image; } //创建一个文本 function createText(fromP,toP,textCon,color){ //载体shape var line=document.createElement("v:line"); line.style.zIndex=100; line.style.top=0; line.style.left=0; line.from=fromP; line.to=toP; line.strokecolor=color; line.setAttribute("textType","nameText"); //依赖path var path=document.createElement("v:path"); path.textpathok="t"; line.appendChild(path); //textpath var textPath=document.createElement("v:textpath"); textPath.on="t"; textPath.fitpath="f"; textPath.string=textCon; textPath.style.zIndex="100"; textPath.style.fontFamily="宋体"; textPath.style.fontSize="13px"; textPath.style.backgroundRepeat="no-repeat"; line.appendChild(textPath); return line; } //2.2级函数 //创建一个设备 //这里的位置和大小是由拜访算法确定的 function createDev(identifer,top,left,width,height,imageSrc,name){ //设备首先包含一个group var group=createGroup(identifer,top,left,width,height); group.setAttribute("hasAlarm",false); document.body.appendChild(group); //设备的图片 var image=createImage(0,0,width,height,imageSrc); group.appendChild(image); //设备的名称 var nametext=createText((width/2-100)+","+(height+height/3),(width/2+100)+","+(height+height/3+1),name,"black"); group.appendChild(nametext); return group; }

moveObj.js

这个用来处理元素的拖曳。偷懒，直接使用了原来的源码。