，欢迎访问网页设计爱好者web开发。脚本
*************
* vmlgraph.js
*************
var xo=0;
var yo=0;
var ox=80;
var oy=20;
var dx=0;
var dy=0;
var drawkey = false;
var itemid = 0;
var shapeitemnum = 0;
var shapeitemx = 0;
var shapeitemy = 0;
var curveitemnum = 0;
var nodedelete = false;
var toolbarnum = 2; // 预置的工具编号
var gradientx = -1;
function cursor(k) {
xo = event.clientx - ox;
yo = event.clienty - oy;
if(k && xo>=0 && yo>=0)
oxy.innerhtml = xo+","+yo;
else
oxy.innerhtml = "";
if(drawkey) {
paint();
view.innerhtml = tree(canvas.documentelement,0);
}
}
function setovercolor(v) {
if(! nodedelete) return;
v.mycolor = v.strokecolor;
if(v.strokecolor == "red")
v.strokecolor='#000000';
else
v.strokecolor='#ff0000';
}
function setoutcolor(v) {
if(! nodedelete) return;
v.strokecolor = v.mycolor;
view.innerhtml = tree(canvas.documentelement,0);
}
function deletenode(v) {
if(! nodedelete) return;
var id = v.id;
for(i=0;i<canvas.selectnodes("/*//*").length;i++) {
var node = canvas.selectnodes("/*//*")[i];
if(node.getattribute("id") == id) {
canvas.documentelement.childnodes[0].removechild(node);
view.innerhtml = tree(canvas.documentelement,0);
return;
}
}
}
function setelement(node) {
node.setattribute("id") = itemid;
node.setattribute("mycolor") = "#";
node.setattribute("onmouseover") = "setovercolor(this)";
node.setattribute("onmouseout") = "setoutcolor(this)";
node.setattribute("onclick") = "deletenode(this)";
var subobjfield = canvas.createelement("v:stroke");
subobjfield.setattribute("color") = color1.fillcolor;
subobjfield.setattribute("dashstyle") = dashstyle.dashstyle;
node.appendchild(subobjfield);
if(textbox.style.visibility == "visible" && txt.value.length) {
var subobjfield = canvas.createelement("v:path");
subobjfield.setattribute("textpathok") = "true";
node.appendchild(subobjfield);
var subobjfield = canvas.createelement("v:textpath");
subobjfield.setattribute("on") = "true";
subobjfield.setattribute("string") = txt.value;
subobjfield.setattribute("style") = "font:normal normal normal 16pt 'arial black'";
node.appendchild(subobjfield);
}
canvas.documentelement.childnodes[0].appendchild(node);
}
function mouse_down() {
drawkey = true;
dx = xo;
dy = yo;
itemid++;
if(toolbarnum != 7) shapeitemnum = 0;
switch(toolbarnum) {
case 3:
var objfield = canvas.createelement("v:line");
objfield.setattribute("from") = xo+","+yo;
objfield.setattribute("to") = xo+","+yo;
return setelement(objfield);
case 4:
if(curveitemnum == 0) {
curveitemnum = 1;
var objfield = canvas.createelement("v:curve");
objfield.setattribute("from") = xo+","+yo;
objfield.setattribute("to") = xo+","+yo;
objfield.setattribute("control1") = xo+","+yo;
objfield.setattribute("control2") = xo+","+yo;
var subobjfield = canvas.createelement("v:fill");
subobjfield.setattribute("opacity") = 0;
objfield.appendchild(subobjfield);
return setelement(objfield);
}
return;
case 9:
var objfield = canvas.createelement("v:polyline");
objfield.setattribute("points") = xo+","+yo+" "+xo+","+yo;
var subobjfield = canvas.createelement("v:fill");
subobjfield.setattribute("opacity") = 0;
objfield.appendchild(subobjfield);
return setelement(objfield);
case 7:
if(shapeitemnum == 0) {
var objfield = canvas.createelement("v:shape");
objfield.setattribute("style") = "width:500; height:309";
objfield.setattribute("path") = "m "+xo+","+yo+" l "+xo+","+yo;
shapeitemx = xo;
shapeitemy = yo;
}else {
objfield = canvas.documentelement.childnodes[0].lastchild;
objfield.setattribute("path") = objfield.getattribute("path") + " "+xo+","+yo;
return;
}
shapeitemnum++;
break;
case 5:
var objfield = canvas.createelement("v:rect");
break;
case 6:
var objfield = canvas.createelement("v:roundrect");
objfield.setattribute("arcsize") = 0.2;
break;
case 8:
var objfield = canvas.createelement("v:oval");
break;
case 10:
s = "";
s = tree(canvas.documentelement,1);
view.innerhtml = s;
return;
defaule:
drawkey = false;
return;
}
if(objfield) {
if(toolbarnum != 7)
objfield.setattribute("style") = "left:"+xo+"; top:"+yo+"; width:0; height:0;";
var subobjfield = canvas.createelement("v:fill");
subobjfield.setattribute("opacity") = gradientbar.opacity;
subobjfield.setattribute("angle") = gradientbar.angle;
subobjfield.setattribute("type") = gradientbar.type;
subobjfield.setattribute("color") = gradientbar.color.value;
subobjfield.setattribute("color2") = gradientbar.color2.value;
subobjfield.setattribute("colors") = gradientbar.colors.value;
subobjfield.setattribute("focusposition") = gradientbar.focusposition;
objfield.appendchild(subobjfield);
return setelement(objfield);
}
return;
}
function mouse_up() {
drawkey = false;
if(curveitemnum > 0) curveitemnum++;
if(curveitemnum > 3) curveitemnum = 0;
if(toolbarnum == 7) {
if(math.abs(xo - shapeitemx) < 2 && math.abs(yo - shapeitemy) < 2) {
shapeitemnum = 0;
element = canvas.documentelement.childnodes[0].lastchild;
var regerp = / [0-9]+,[0-9]+$/
var str = element.getattribute("path");
element.setattribute("path") = str.replace(regerp," x e");
view.innerhtml = tree(canvas.documentelement,0);
}
}
}
function paint() {
element = canvas.documentelement.childnodes[0].lastchild;
var x0,y0,x1,y1;
x0 = math.min(dx,xo);
y0 = math.min(dy,yo);
x1 = math.max(dx,xo);
y1 = math.max(dy,yo);
var box = "left:"+x0+"; top:"+y0+"; width:"+(x1-x0)+"; height:"+(y1-y0)+";";
switch(toolbarnum) {
case 4:
if(curveitemnum ==2) {
element.setattribute("control1") = xo+","+yo;
element.setattribute("control2") = element.getattribute("to");
break;
}
if(curveitemnum ==3) {
element.setattribute("control2") = xo+","+yo;
break;
}
case 3:
element.setattribute("to") = xo+","+yo;
break;
case 7:
var regerp = /[0-9]+,[0-9]+$/
var str = element.getattribute("path");
element.setattribute("path") = str.replace(regerp,xo+","+yo);
break;
case 5:
case 6:
case 8:
var regerp = /left.+height:[0-9]+;/
var str = element.getattribute("style");
element.setattribute("style") = str.replace(regerp,box);
break;
case 9:
var regerp = / [0-9]+,[0-9]+$/
var str = element.getattribute("points");
element.setattribute("points") = str+" "+xo+","+yo;
break;
defaule:
break;
}
}
function init() {
tool_box_refresh(); // 工具栏初始
view.innerhtml = tree(canvas.documentelement); // 绘图区初始
color.innerhtml = tree(tools.selectnodes("*/colorbar")[0]); // 颜色选择初始
linebox.innerhtml = tree(tools.selectnodes("*/linebox")[0]); // 线型选择初始
gradientbox.innerhtml = tree(tools.selectnodes("*/gradient")[0]); // 充填选择初始
}
// 绘制工具栏
function tool_box_refresh() {
var buffer = "";
var i;
for(i=0;i<tools.selectnodes("*/toolbar").length;i++) {
var node = tools.selectnodes("*/toolbar")[i];
var id = node.getattribute("id");
node.childnodes[0].setattribute("onclick") = "tool_box_select("+id+",this.title)";
var node1 = node.selectnodes("*/v:rect")[0];
if(id == toolbarnum) {
node1.setattribute("fillcolor") = "#ffcccc"
node1.setattribute("strokecolor") = "#ff0000"
}else {
node1.setattribute("fillcolor") = "#ffffff"
node1.setattribute("strokecolor") = "#000000"
}
buffer += tree(node.childnodes[0]);
}
toolbox.innerhtml = buffer;
}
// 工具选择
function tool_box_select(v,t) {
var key = toolbarnum;
toolbarnum = v;
tool_box_refresh();
hooke();
if(v == 7) {
if(key == 7 && shapeitemnum > 0) {
element = canvas.documentelement.childnodes[0].lastchild;
var str = element.getattribute("path");
element.setattribute("path") = str + " x e";
view.innerhtml = tree(canvas.documentelement,0);
shapeitemnum = 0;
}
}
if(v == 10)
if(textbox.style.visibility == "hidden")
textbox.style.visibility = "visible";
else
textbox.style.visibility = "hidden";
nodedelete = false;
if(v == 1) {
nodedelete = true;
view.innerhtml = tree(canvas.documentelement,0);
}
}
// 颜色选择
//var setcolorkey = color1;
function setcolor(c) {
var setcolorkey = color1;
setcolorkey.fillcolor = c;
}
function gradientcolor(v) {
v.fillcolor = color1.fillcolor;
gradientrefresh();
return;
var m = tools.documentelement.selectnodes("/*/gradient//v:shape").length;
var node = tools.documentelement.selectnodes("/*/gradient//v:shape");
for(i=0;i<m;i++) {
if(node[i].getattribute("id") == v.id)
node[i].setattribute("fillcolor") = color1.fillcolor;
}
gradientrefresh();
}
function gradientpoint(v) {
if(gradientx < 0)
gradientx = xo - 508 - parseint(v.style.left);
n = xo - 508 - gradientx;
if(n < 8) n = 8;
if(n > 108) n = 108;
v.style.left = n;
gradientrefresh();
}
function anglepoint(v) {
angle.style.left = math.floor((xo-516)/25)*25+8;
gradientrefresh();
}
function opacitypoint(v) {
opacity.style.left = math.floor((xo-516)/25)*25+8;
gradientrefresh();
}
function settype(v) {
if(v.style.bordercolor == "black")
v.style.bordercolor = "red";
else
v.style.bordercolor = "black";
gradientrefresh();
}
function setgradientx() {
gradientx = -1;
}
function gradientrefresh() {
var m = (parseint(gradient4.style.left)-parseint(gradient1.style.left));
var n1 = (parseint(gradient2.style.left)-parseint(gradient1.style.left))/m*100;
var n2 = (parseint(gradient3.style.left)-parseint(gradient1.style.left))/m*100;
gradientbar.color.value = gradient1.fillcolor;
gradientbar.color2.value = gradient4.fillcolor;
if(type3.style.bordercolor == "black")
gradientbar.colors.value = ",";
else
gradientbar.colors.value = n1 + "% " + gradient2.fillcolor + "," + n2 + "% " + gradient3.fillcolor;
if(type1.style.bordercolor == "black")
gradientbar.type = "solid";
else
gradientbar.type = "gradient";
if(type2.style.bordercolor == "red")
gradientbar.type = "gradientradial";
n1 = (parseint(focus1.style.left)-8)/m*100;
n2 = (parseint(focus2.style.left)-8)/m*100;
gradientbar.focusposition.value = n1 + "%," + n2 + "%";
gradientbar.angle = (parseint(angle.style.left)-8) * 3.6;
gradientbar.opacity = (parseint(opacity.style.left)-8)/m
}
*************
* xmltool.js
*************
// 传送xml文档到服务器
function savexml()
{
var xmlhttp = new activexobject("microsoft.xmlhttp");
xmlhttp.open("post","server.php",false); // 使用asp时用server.asp
xmlhttp.setrequestheader("contrn-type","text/xml");
xmlhttp.setrequestheader("contrn-charset","gb2312");
xmlhttp.send(tree(canvas.documentelement));
var s = xmlhttp.responsetext;
minview.innerhtml = s.replace(/width:500;height:300/,"width:120;height:72")
if(xmlhttp.responsetext.indexof("error:")!=-1) {
alert(xmlhttp.responsetext);
}
}
// 遍历xml对象，解析xml的核心函数集
function tree(element,debug) {
var buffer = "";
var node = "";
if(element.nodetype != 3) {
node = element;
buffer += onelement(element,debug);
}
if(element.nodetype == 3)
buffer += ondata(element);
if(element.haschildnodes) {
for(var i=0;i<element.childnodes.length;i++) {
buffer += tree(element.childnodes(i),debug);
}
}
if(node)
buffer += endelement(node,debug);
return buffer;
}
/***** 以下三个函数请根据需要自行修改 *****/
// 遍历xml对象--节点开始
function onelement(element,debug) {
var buffer = (debug ? "<" : "<") + element.nodename;
n = element.attributes.length
if(n>0) { // 若该节点有参数
for(var i=0;i<n;i++)
buffer += ' ' + element.attributes(i).name + '=/"' + element.attributes(i).value + '"';
}
buffer += debug ? ">" : ">";
return buffer;
}
// 遍历xml对象--节点结束
function endelement(element,debug) {
return (debug ? "</" : "</") + element.nodename + (debug ? "><br>" : ">");
}
// 遍历xml对象--节点数据
function ondata(element) {
return element.nodevalue
}
