SoFunction
Updated on 2025-03-09

VML drawing board ② script--,


script
*************
*
*************
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; // Preset tool number
var gradientX = -1;

function cursor(k) {
  xo = - ox;
  yo = - oy;
  if(k && xo>=0 && yo>=0)
     = xo+","+yo;
  else
     = "";
  if(drawKey) {
    paint();
     = tree(,0);
  }
}

function setOverColor(v) {
  if(! NodeDelete) return;
   = ;
  if( == "red")
    ='#000000';
  else
    ='#ff0000';
}
function setOutColor(v) {
  if(! NodeDelete) return;
   = ;
   = tree(,0);
}
function deleteNode(v) {
  if(! NodeDelete) return;
  var id = ;
  for(i=0;i<("/*//*").length;i++) {
    var node = ("/*//*")[i];
    if(("id") == id) {
      [0].removeChild(node);
       = tree(,0);
      return;
    }
  }
}

function setElement(node) {
  ("id") = itemID;
  ("myColor") = "#";
  ("onMouseOver") = "setOverColor(this)";
  ("onMouseOut") = "setOutColor(this)";
  ("onClick") = "deleteNode(this)";

  var subobjField = ("v:stroke");
  ("color") = ;
  ("dashstyle") = ;
  (subobjField);
  if( == "visible" && ) {
    var subobjField = ("v:path");
    ("textpathok") = "true";
    (subobjField);
    var subobjField = ("v:textpath");
    ("on") = "true";
    ("string") = ;
    ("style") = "font:normal normal normal 16pt 'Arial Black'";
    (subobjField);
  }
  [0].appendChild(node);
}

function mouse_down() {
  drawKey = true;
  dx = xo;
  dy = yo;
  itemID++;
  if(ToolBarNum != 7) ShapeItemNum = 0;
  switch(ToolBarNum) {
    case 3:
      var objField = ("v:line");
      ("from") = xo+","+yo;
      ("to") = xo+","+yo;
      return setElement(objField);
    case 4:
      if(CurveItemNum == 0) {
        CurveItemNum = 1;
        var objField = ("v:curve");
        ("from") = xo+","+yo;
        ("to") = xo+","+yo;
        ("control1") = xo+","+yo;
        ("control2") = xo+","+yo;
        var subobjField = ("v:fill");
        ("opacity") = 0;
        (subobjField);
        return setElement(objField);
      }
      return;
    case 9:
      var objField = ("v:polyline");
      ("points") = xo+","+yo+" "+xo+","+yo;
      var subobjField = ("v:fill");
      ("opacity") = 0;
      (subobjField);
      return setElement(objField);
    case 7:
      if(ShapeItemNum == 0) {
        var objField = ("v:shape");
        ("style") = "width:500; height:309";
        ("path") = "m "+xo+","+yo+" l "+xo+","+yo;
        ShapeItemX = xo;
        ShapeItemY = yo;
      }else {
        objField = [0].lastChild;
        ("path") = ("path") + " "+xo+","+yo;
        return;
      }
      ShapeItemNum++;
      break;
    case 5:
      var objField = ("v:rect");
      break;
    case 6:
      var objField = ("v:roundrect");
      ("arcsize") = 0.2;
      break;
    case 8:
      var objField = ("v:oval");
      break;
    case 10:
      s = "";
      s = tree(,1);
       = s;
      return;
    defaule:
      drawKey = false;
      return;
  }
  if(objField) {
    if(ToolBarNum != 7)
      ("style") = "left:"+xo+"; top:"+yo+"; width:0; height:0;";
    var subobjField = ("v:fill");
    ("opacity") = ;
    ("angle") = ;
    ("type") = ;
    ("color") = ;
    ("color2") = gradientBar.;
    ("colors") = ;
    ("focusposition") = ;
    (subobjField);
    return setElement(objField);
  }
  return;
}

function mouse_up() {
  drawKey = false;
  if(CurveItemNum > 0) CurveItemNum++;
  if(CurveItemNum > 3) CurveItemNum = 0;
  if(ToolBarNum == 7) {
    if((xo - ShapeItemX) < 2 && (yo - ShapeItemY) < 2) {
      ShapeItemNum = 0;
      Element = [0].lastChild;
      var regerp = / [0-9]+,[0-9]+$/
      var str = ("path");
      ("path") = (regerp," x e");
       = tree(,0);
    }
  }
}

function paint() {
  Element = [0].lastChild;
  var x0,y0,x1,y1;
  x0 = (dx,xo);
  y0 = (dy,yo);
  x1 = (dx,xo);
  y1 = (dy,yo);
  var box = "left:"+x0+"; top:"+y0+"; width:"+(x1-x0)+"; height:"+(y1-y0)+";";
  switch(ToolBarNum) {
    case 4:
      if(CurveItemNum ==2) {
        ("control1") = xo+","+yo;
        ("control2") = ("to");
        break;
      }
      if(CurveItemNum ==3) {
        ("control2") = xo+","+yo;
        break;
      }
    case 3:
      ("to") = xo+","+yo;
      break;
    case 7:
      var regerp = /[0-9]+,[0-9]+$/
      var str = ("path");
      ("path") = (regerp,xo+","+yo);
      break;
    case 5:
    case 6:
    case 8:
      var regerp = /left.+height:[0-9]+;/
      var str = ("style");
      ("style") = (regerp,box);
      break;
    case 9:
      var regerp = / [0-9]+,[0-9]+$/
      var str = ("points");
      ("points") = str+" "+xo+","+yo;
      break;
    defaule:
      break;
  }

}

function init() {
tool_box_refresh();  // Initial toolbar
= tree();  // The initial drawing area
= tree(("*/colorbar")[0]);  // The color selection starts
= tree(("*/linebox")[0]);  // The initial line type selection
= tree(("*/gradient")[0]);  // Fill the initial selection
}

// Draw toolbar
function tool_box_refresh() {
  var buffer = "";
  var i;
  for(i=0;i<("*/toolbar").length;i++) {
    var node = ("*/toolbar")[i];
    var id = ("id");
    [0].setAttribute("onClick") = "tool_box_select("+id+",)";
    var node1 = ("*/v:rect")[0];
    if(id == ToolBarNum) {
      ("fillcolor") = "#ffcccc"
      ("strokecolor") = "#ff0000"
    }else {
      ("fillcolor") = "#ffffff"
      ("strokecolor") = "#000000"
    }
    buffer += tree([0]);
  }
   = buffer;
}

// Tool selection
function tool_box_select(v,t) {
  var key = ToolBarNum;
  ToolBarNum = v;
  tool_box_refresh();
  hooke();
  if(v == 7) {
    if(key == 7 && ShapeItemNum > 0) {
      Element = [0].lastChild;
      var str = ("path");
      ("path") = str + " x e";
       = tree(,0);
      ShapeItemNum = 0;
    }
  }
  if(v == 10)
    if( == "hidden")
       = "visible";
    else
       = "hidden";
  NodeDelete = false;
  if(v == 1) {
    NodeDelete = true;
     = tree(,0);
  }
}

// Color selection
//var setcolorkey = color1;
function setcolor(c) {
  var setcolorkey = color1;
   = c;
}

function gradientColor(v) {
   = ;
  gradientRefresh();
  return;
  var m = ("/*/gradient//v:shape").length;
  var node = ("/*/gradient//v:shape");
  for(i=0;i<m;i++) {
    if(node[i].getAttribute("id") == )
      node[i].setAttribute("fillcolor") = ;
  }
  gradientRefresh();
}
function gradientPoint(v) {
  if(gradientX < 0)
    gradientX = xo - 508 - parseInt();
  n = xo - 508 - gradientX;
  if(n < 8) n = 8;
  if(n > 108) n = 108;
   = n;
  gradientRefresh();
}
function anglePoint(v) {
   = ((xo-516)/25)*25+8;
  gradientRefresh();
}
function opacityPoint(v) {
   = ((xo-516)/25)*25+8;
  gradientRefresh();
}
function settype(v) {
  if( == "black")
     = "red";
  else
     = "black";
  gradientRefresh();
}
function setGradientX() {
gradientX = -1;
}

function gradientRefresh() {
  var m = (parseInt()-parseInt());
  var n1 = (parseInt()-parseInt())/m*100;
  var n2 = (parseInt()-parseInt())/m*100;
   = ;
  gradientBar. = ;
  if( == "black")
     = ",";
  else
     = n1 + "% " + + "," + n2 + "% " + ;
  if( == "black")
     = "solid";
  else
     = "gradient";
  if( == "red")
     = "gradientradial";
  n1 = (parseInt()-8)/m*100;
  n2 = (parseInt()-8)/m*100;
   = n1 + "%," + n2 + "%";
   = (parseInt()-8) * 3.6;
   = (parseInt()-8)/m
}

*************
*
*************

// Transfer XML documents to the server
function saveXML()
{
  var xmlHTTP = new ActiveXObject("");
("POST","",false); // Used when using ASP
  ("Contrn-type","text/xml");
  ("Contrn-charset","gb2312");

  (tree());
  var s = ;
   = (/WIDTH:500;HEIGHT:300/,"WIDTH:120;HEIGHT:72")
  if(("Error:")!=-1) {
    alert();
  }
}

// traverse the xml object and parse the core function set of xml
function tree(Element,debug) {
  var buffer = "";
  var node = "";
  if( != 3) {
    node = Element;
    buffer += onElement(Element,debug);
  }
  if( == 3)
    buffer += onData(Element);
  if() {
    for(var i=0;i<;i++) {
      buffer += tree((i),debug);
    }
  }
  if(node)
    buffer += endElement(node,debug);
  return buffer;
}

/******* Please modify the following three functions as needed *****/
// traversal xml object-node start
function onElement(Element,debug) {
  var buffer = (debug ? "<" : "<") + ;
  n =
if(n>0) {  // If this node has parameters
    for(var i=0;i<n;i++)
      buffer += ' ' + (i).name + '=\"' + (i).value + '"';
  }
  buffer += debug ? ">" : ">";
  return buffer;
}

// traversal xml object--node end
function endElement(Element,debug) {
  return (debug ? "</" : "</") + + (debug ? "><br>" : ">");
}

// traverse xml object-node data
function onData(Element) {
  return
}