VML封装库

一枝独秀2013

于 2012-08-26 15:39:49 发布

阅读量885

点赞数

分类专栏： Web绘图文章标签： function textbox object string null ext

Web绘图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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