?? 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;
};
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添加一些常用方法
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -