您好,欢迎访问一九零五行业门户网

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

脚本
*************
* 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    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)       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    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    if(node[i].getattribute(id) == v.id)
      node[i].setattribute(fillcolor) = color1.fillcolor;
  }
  gradientrefresh();
}
function gradientpoint(v) {
  if(gradientx     gradientx = xo - 508 - parseint(v.style.left);
  n = xo - 508 - gradientx;
  if(n   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      buffer += tree(element.childnodes(i),debug);
    }
  }
  if(node)
    buffer += endelement(node,debug);
  return buffer;
}
/***** 以下三个函数请根据需要自行修改 *****/
// 遍历xml对象--节点开始
function onelement(element,debug) {
  var buffer = (debug ?   n = element.attributes.length
  if(n>0) {  // 若该节点有参数
    for(var i=0;i      buffer += ' ' + element.attributes(i).name + '=\' + element.attributes(i).value + '';
  }
  buffer += debug ? > : >;
  return buffer;
}
// 遍历xml对象--节点结束
function endelement(element,debug) {
  return (debug ? : ) + element.nodename + (debug ? >
: >);
}
// 遍历xml对象--节点数据
function ondata(element) {
  return element.nodevalue
}
http://www.bkjia.com/phpjc/314076.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/314076.htmltecharticle脚本 ************* * 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 shapei...
其它类似信息

推荐信息