VML绘图板②脚本--VMLgraph.js、XMLtool.js

脚本
*************
* 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
}

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！