vml工作流
最近看了下vml 把学到的一点东西封了一个类
/**
* @description 定制开发部 创建vml类
* @cop：北京神舟航天软件技术有限公司定制开发部
* @version 0.1 hemaoqing
* @date 2009-02-16
* @function 目前提供的功能:划线 矩形框,拖动
* @type
*/
/*定义全局变量*/
var dragapproved = false;
var eventsource,x,y;
var popeventsource = "";
var temp1 = 0;
var temp2 = 0;
dzkf_vml={
/**
* 创建一个vml对象</br>内部调用
*
* @param {} s
* @return {}
*/
create_vml:function(s){return document.createElement('<vml:'+s+'/>');},
/**
* 创建一个绝对定位的vml
* @param {} s:vml的元素定义
* @return {} 返回创建的vml对象
*/
create_ABS_vml:function(s){return this.create_vml(s+' style="position:absolute;Z-INDEX: 1;VERTICAL-ALIGN: middle;TEXT-ALIGN: center"');},
/**
* 改变大小
* @param {} el
* @param {} w
* @param {} h
*/
resize:function(el,w,h) { el.style.width=Math.round(w)+'px', el.style.height=Math.round(h)+'px'; },
/**
* 移动
* @param {} el
* @param {} x
* @param {} y
*/
moveto:function(el,x,y) { el.style.left=Math.round(x)+'px', el.style.top=Math.round(y)+'px'; },
/**
* 在e1中插入el2并且命名为name
* @param {} el
* @param {} el2
* @param {} name
*/
insert_Sel:function(el,el2,name){
el.insertBefore(el2);
el2.style.zIndex–; el2.style.zIndex++;
if(!el.els) el.els=new Array();
if(name==""){ el.els[el.els.length]=el2; }
else el.els[name]=el2;
},
/**
* 给el插入一个name的元素
* @param {} el
* @param {} name xx:线形 txt:文本框 sh:阴影 ext:立体图 fill:fill
* @return {}被插入的元素
*/
insert:function(el,name){
var s;
if(el.els){ if(el.els[name]) return el.els[name]; }
if(name=="line||xx"||"arr") s='stroke endarrow="block"'; //线类型元素或箭头
if(name=="text") s='Textbox inset="1px,1px,1px,1px" style="height:20;font-size:12px;WORD-BREAK:break-all;COLOR:#f81ad2"';
if(name=="shadow") s='shadow on="T" type="single" color="#b3b3b3" offset="2px,2px"'; //阴影
if(name=="ext") s='extrusion on="T" color="red" rotationangle="0,0"'; //立体图形
if(name=="fill")s="fill";
var el2=this.create_vml(s); this.insert_Sel(el,el2,name); return el2;
},
/**
* 划线
* @description 仅仅是划线 没有定义起始点
* @return el 返回line节点
*/
create_line:function()
{
var el=this.create_ABS_vml('line');
return el;
},
/**
* @description 划线 定义 from to
* @param {} x1 起始点坐标
* @param {} y1 起始点坐标
* @param {} x2 终止点坐标
* @param {} y2 终止点坐标
* @return {} 返回line节点
*/
create_line_from_to:function(x1,y1,x2,y2)
{
var el=this.create_ABS_vml('line');
el.from=Math.round(x1)+","+Math.round(y1);
el.to =Math.round(x2)+","+Math.round(y2);
return el;
},
/**
* 创建矩形
* @param {} x ：x坐标
* @param {} y ：y坐标
* @param {} sx ：width宽度
* @param {} sy ：height高度
* @return 返回该节点
*/
create_roundrect:function(x,y,sx,sy,id)
{
var el=this.create_ABS_vml("roundrect");
el.inset="2pt,2pt,2pt,2pt";
this.moveto(el,x,y);
this.resize(el,sx,sy);
el.id=id;
return el;
},
/**
* 划线 如果在创建线对象时没有指定from to则必须调用该方法
* 这里规定source是线的起始点对象的id 需要起始点对象定义id属性
* object 终结点对象id
*/
drawLine:function()
{
var source;
var object;
var sourceObj;
var objectObj;
var x0,y0,x1,y1;
var p0,p1;
var a = document.getElementsByTagName('line');
for (var i = 0; i < a.length; i++)
{
source = a[i].getAttribute('source');
object = a[i].getAttribute('object');
if ((source != null) && (object != null))
{
sourceObj = document.getElementById(source);
objectObj = document.getElementById(object);
if ((sourceObj == null) || (objectObj == null)) continue;
if (sourceObj.style.pixelLeft > objectObj.style.pixelLeft)
{
if ((sourceObj.style.pixelLeft – objectObj.style.pixelLeft) <= objectObj.style.pixelWidth)
{
x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth / 2;
x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth / 2;
if (sourceObj.style.pixelTop > objectObj.style.pixelTop)
{
y0 = sourceObj.style.pixelTop;
y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight;
}
else
{
y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight;
y1 = objectObj.style.pixelTop;
}
}
else
{
x0 = sourceObj.style.pixelLeft;
x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth;
y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight / 2;
y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight / 2;
}
}
else
{
if ((objectObj.style.pixelLeft – sourceObj.style.pixelLeft) <= objectObj.style.pixelWidth)
{
x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth / 2;
x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth / 2;
if (sourceObj.style.pixelTop > objectObj.style.pixelTop)
{
y0 = sourceObj.style.pixelTop;
y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight;
}
else
{
y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight;
y1 = objectObj.style.pixelTop;
}
}
else
{
x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth;
x1 = objectObj.style.pixelLeft;
y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight / 2;
y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight / 2;
}
}
a[i].from = String(x0) + ',' + String(y0);
a[i].to = String(x1) + ',' + String(y1);
a[i].style.pixelLeft = x0 + 'px';
a[i].style.pixelTop = y0 + 'px';
}
}
},
/**
* 移动
* @return {Boolean}
*/
move:function()
{
if (event.button == 1 && dragapproved)
{
var newleft = temp1 + event.clientX – x;
var newtop = temp2 + event.clientY – y;
eventsource.style.pixelLeft = newleft;
eventsource.style.pixelTop = newtop;
dzkf_vml.drawLine();
return false;
}
return;
},
/**
* 拖动
*/
drags:function()
{
if (event.button != 1)
return;
var objRect = event.srcElement;
if (objRect.tagName == 'roundrect')
{
dragapproved = true;
eventsource = objRect;
temp1 = eventsource.style.pixelLeft;
temp2 = eventsource.style.pixelTop;
x = event.clientX;
y = event.clientY;
}
},
/**
* 结束拖动
*/
nodrags:function()
{
dragapproved = false;
}
}
//var el=dzkf_vml.create_roundrect(100,100,100,100,'id1');
// var e2=dzkf_vml.insert(el,'txt');
// e2.style.COLOR="#f81ad2;";
// dzkf_vml.insert(el,'shadow');
// var el1=dzkf_vml.create_roundrect(300,100,100,100,'id3');
// dzkf_vml.insert(el1,'shadow');
// el1.innerHTML='<vml:textbox title="步骤名称：部门
下一步骤：" inset="0pt,0pt,0pt,0pt">部门</vml:textbox> ';
//Ext.getBody().appendChild(el);
//Ext.getBody().appendChild(el1);
//
//var l=dzkf_vml.create_line();
//l.source='id1';
//l.object='id3';
//s=dzkf_vml.insert(l,'arr');
//Ext.getBody().appendChild(l);
document.onmousedown = dzkf_vml.drags;
document.onmouseup = dzkf_vml.nodrags;
document.onmousemove =dzkf_vml.move;
dzkf_vml.drawLine();
来自http://hi.baidu.com/hemaoqing/item/9883f508ae9d58026c904852