📄 vml.js
字号:
//==============================
//--本程序由许剑伟开发
//--名称：VML作图工具包
//--功能：实现IE作图
//--于莆田十中
//--2008.11
//==============================
//页面不能为空，否画布不显示
document.write('<html xmlns:v="urn:schemas-microsoft-com:vml">');//定义名称空间
document.createStyleSheet().cssText="v\\:*{behavior:url(#default#VML)}"; //连接样式表
var ht_b={
//元素的创建
Vel:function(s) {return document.createElement('<v:'+s+'/>');}, //创建一个vml元素
INSel:function(el,el2){ //在el中内插元素el2
el.insertBefore(el2); //XML的方法
el2.style.zIndex--; el2.style.zIndex++; //多画布中el插入后,当前容器(画布)不一定收到refresh()事件,主动改变显示层让它刷新
},
Ael:function(el,name){//给el增加元素(name为模板)
var s;
if(name=="xx"||"arr") s='stroke'; //线类型元素或箭头
if(name=="txt") s='textBox inset="5px,5px,5px,5px" style="font-size:12px"'; //文本;position:absolute
if(name=="sh") s='shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"'; //阴影
if(name=="ext") s='extrusion on="True" color="red" rotationangle="0,0"'; //立体图形
if(name=="fill")s="fill";
var el2=ht_b.Vel(s); ht_b.INSel(el,el2,name); return el2;
},
ABSel:function(s){ return this.Vel(s+' style="position:absolute"'); }, //创建一个绝对定位的vml元素
Vel2:function(s){ //创建一个绝对定位的vml元素,并加入新方法
var el=this.Vel(s+' style="position:absolute"');
//给el添加常用方法
el.zindex=function(index){ this.style.zIndex=index; }; //改变叠放次序
el.resize=function(w,h) { this.style.width=Math.round(w)+'px', this.style.height=Math.round(h)+'px'; }; //改变对象大小
el.moveto=function(x,y) { this.style.left =Math.round(x)+'px', this.style.top =Math.round(y)+'px'; }; //移动对象到x,y
el.moveto2=function(x,y) { //对象中心移动到(x,y)处
var dx = String(this.style.width).replace(/[^0-9]/g,'');
var dy = String(this.style.height).replace(/[^0-9]/g,'');
this.moveto(x-dx/2,y-dy/2);
},
el.movedx=function(dx,dy){ //移动对象,移动距离为dx,dy
var x = String(this.style.left).replace(/[^0-9]/g,"")-0;
var y = String(this.style.top ).replace(/[^0-9]/g,"")-0;
this.style.left =Math.round(x+dx)+'px';
this.style.top =Math.round(y+dy)+'px';
};
el.setopa=function(b) { //改变对象透明度
if(!this.fillID) this.fillID = ht_b.Ael(el,"fill");
this.fillID.opacity=b;
};
el.setcol=function(c1,c2){ //改变对象颜色
if(!this.fillID) this.fillID = ht_b.Ael(el,"fill");
this.fillID.color=c1;
this.fillID.color2=c2;
};
el.setqb=function(qb){ //设置铅笔
if(!el.qbID) this.qbID=ht_b.Ael(el,"xx"); //插入线类型元素
this.fillColor =qb.fillcolor; //填充色
this.filled =qb.filled; //是否填充
this.stroked =qb.stroked; //是否有线条
this.strokeColor =qb.strokecolor; //线颜色
this.strokeWeight=qb.strokeweight;//线宽度
this.qbID.dashstyle=qb.strokestyle;
};
el.setzbx=function(cd,w,h){ //设置坐标系,用于shape和group容器等
this.coordsize=cd; //coordsize指网格数(网格密度)
this.style.width =Math.round(w)+'px';
this.style.height=Math.round(h)+'px';
};
el.setzbx2=function(canvas){ //复制坐标系参数,用于shape和group容器等
var cd=canvas.coordsize;
this.coordsize=cd;
cd=String(cd).split(',');
this.style.width =cd[0]+'px';
this.style.height=cd[1]+'px';
};
return el;
},
//工具函数
clone:function(ob){ //对象复制
var obj = new Object();
for(var ns in ob){ //复制子对象
if(typeof(ob[ns])=="object") obj[ns] = ht.clone(ob[ns]);
else obj[ns]=ob[ns];
}
return obj;
}
};
var ht={
canvas:'',
qb: {fillcolor:"#FF0000",filled:"true", stroked:"true", strokecolor:"#00cc00",strokeweight:"1px",strokestyle:"solid"}, //默认铅笔1
line:function(x1,y1,x2,y2){ //画线
var el=ht_b.Vel2('line');
el.setqb(this.qb); //设置el的铅笔
el.from=Math.round(x1)+","+Math.round(y1);
el.to =Math.round(x2)+","+Math.round(y2);
ht_b.INSel(this.canvas,el); return el; //把el加入画布
},
polyLine:function(points,canvas) { //画折线
var el=ht_b.Vel2('polyline');
el.setqb(this.qb); //设置el的铅笔
el.points=points;
ht_b.INSel(this.canvas,el); return el; //把el加入画布
},
textbox:function(x,y,sx,sy,txt){ //输出文本
//创建距形
var el=ht_b.Vel2('rect');
el.setqb(this.qb); //设置el的铅笔
//加入文本
el.txtID=ht_b.ABSel('textBox inset="0px,0px,0px,0px" style="font-size:12px;font-family:宋体"');
el.set =function(x,y,sx,sy,txt){ this.moveto(x,y); this.resize(sx,sy); this.txtID.innerHTML=txt; };
el.set(x,y,sx,sy,txt);
ht_b.INSel(el,el.txtID);
//把el加入画布
ht_b.INSel(this.canvas,el); return el;
},
shape:function(path){ //画任意图形
var el=ht_b.Vel2('shape');
el.setqb(this.qb); //设置el的铅笔
el.path = path;
el.setzbx2(this.canvas); //此行必须,否则不显示
var ph=String(ph).replace(/[ ,]+/g,",");
if(ph.substr(0,1)==",") ph=ph.substr(1,ph.length-1); //去前导分隔符
el.phs = ph.split(',');
if(!ph) el.phs.length=0;
el.p_cls=function(){ this.phs.length=0; }; //清空路径缓存
el.p_moveto=function(x,y){var c=this.phs,n=c.length; c[n++]="=m=",c[n++]=Math.round(x),c[n++]=Math.round(y);};
el.p_lineto=function(x,y){var c=this.phs,n=c.length; c[n++]="=l=",c[n++]=Math.round(x),c[n++]=Math.round(y);};
el.p_oval =function(x,y,sx,sy){this.p_arc(x,y,sx,sy,0,360);}; //圆
el.p_arc =function(x,y,sx,sy,jd1,jd2){ //圆弧
jd1=Math.round(jd1*65536),jd2=Math.round(jd2*65536); sx=Math.round(sx/2),sy=Math.round(sy/2);
var c=this.phs,n=c.length; c[n++]="=al=";
c[n++]=Math.round(x+sx),c[n++]=Math.round(y+sy); //中心
c[n++]=sx,c[n++]=sy; //半径
c[n++]=jd1; c[n++]=jd2; //角度
};
el.p_save=function(){ //保存路径
var s=this.phs.toString();
s=s.replace(/,=|=,/g," ");
s=s.replace(/=/g,"")+" e";
this.path=s; return s;
};
ht_b.INSel(this.canvas,el); return el; //把el加入画布
},
quxian:function(points,qz){ //点序列转标准的曲线或折线序列,应用于shape
var s=String(points).replace(/[, ]+/g,",");
s=s.replace(/(^,)*/g,'');
if(qz=='q') s = 'm '+s+' qb '+points+'r 0,0 e'; //二阶贝赛尔曲线,qb内的坐标数应有奇数才可用e结束画线,否则以x结束(但返回到原点)
if(qz=='z') s = 'm '+s+' l '+points+' e'; //折线
if(qz=='c') s = 'm '+s+' c '+points+' e'; //三点曲线法6n个参数
return this.shape(s);
},
cls:function() { this.canvas.innerHTML=''; }, //清空当前画布内容
group:function(x,y,canvas){//创建容器，参数:位置
var el=ht_b.Vel2('group');
el.setzbx2(this.canvas);
ht_b.addMethod(el); //给el添加一些常用方法
ht_b.INSel(this.canvas,el); //把el加入画布
el.moveto(x,y);
return el;
},
rect0:function(x,y,sx,sy,na){//创建(画)矩形,na为RoundRect时画圆角矩形
var el=ht_b.Vel2(na);
el.setqb(this.qb); //设置el的铅笔
if(sx<0) x+=sx,sx=-sx; if(sy<0) y+=sy,sy=-sy; //检查参数
el.moveto(x,y); el.resize(sx,sy);//设置矩形位及大小
ht_b.INSel(this.canvas,el); return el; //把el加入画布
},
rect: function(x,y,sx,sy) { return this.rect0(x,y,sx,sy,"rect"); }, //画矩形
oval: function(x,y,sx,sy) { return this.rect0(x,y,sx,sy,"oval"); }, //画圆形
img: function(x,y,sx,sy,src) { return this.rect0(x,y,sx,sy,'image src="'+src+'"'); }, //载入图片
rrect:function(x,y,sx,sy,arc) { return this.rect0(x,y,sx,sy,"roundrect arcsize="+arc); }, //画圆角矩形,arcsize为圆角半径
arc: function(x,y,sx,sy,a,b) { return this.rect0(x,y,sx,sy,'arc startAngle="'+a+'" endAngle="'+b+'"'); }, //圆弧
point:function(x,y,s){ var el=this.oval(x-s/2,y-s/2,s,s); el.fillcolor=this.qb.strokecolor; return el; }//画点
};
/*****************
画布html代码示意
图形软件<br>
<v:group id=can1 coordsize="2000,2000" style="width:300px;height:300px;position:relative"/>
<script language=javascript>
ht.canvas=can1;
pc=ht.rect(1000,1000,100,100); //画一个距形
</script>
*****************/⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -