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;vargradientX = -1;

functioncursor(k) {
  xo = event.clientX - ox;
 - 噢；
  if(k && xo>=0 && yo>=0)
    oxy.innerHTML = xo "," yo;
  else ) {
    paint();
    view.innerHTML = tree(canvas.documentElement,0);
  }  v.myColor = v.linescolor;
  if(v.linescolor == "red")
    v.linescolor='#000000';}
function setOutColor(v) {
  if(! NodeDelete) return;
  v.linescolor = v.myor;}
function deleteNode(v) {
  if(! NodeDelete) return;
  var id = v.id;
 ¢; i    var node = canvas.selectNodes("/*//*")[i];
    if(node.getAttribute ) ("id") == id) {
      canvas.documentElement.childNodes[0].removeChild(node);
      🎜 >    }
  }
}

function setElement(node) {
  node.setAttribute("id") = itemem;  node.setAttribute("onMouseOver") = "setOverColor(this)";
  node.setAttribute("onMouseOut") = "setOutor(this)";
 "deleteNode(this)";

  var subobjField = canvas.createElement("v:lines");
  subobjField.setAttribute("color") = color1.fillcolor;  node.appendChild(subobjField);
  if(textbox.style.visibility == "visible" && txt.value.length) {
createElement("v:path");
    subobjField.setAttribute("textpathok") = "true";
   node. );
    subobjField.setAttribute("on") = "true";
    subobjField.setAttribute("string") =正常正常16pt 'Arial Black'";
    node.appendChild(subobjField);
  }
  canvas.documentElement.childNodes[0].appendld(node);  drawKey = true;
  dx = xo;
  dy = yo;
  itemID ;
 ifp(Tool) kampof; ToolBarNum) {
    情況3:
      var objField = canvas.createElement("v:line");
   遠pxo      return setElement(objField);
    情況4:
    1;
        var objField = canvas。 >        objField.setAttribute("control1") = xo "," yo;
        objField.setAttribute("control. ield = canvas.createElement("v:fill") ;
        subobjField.setAttribute("opacity") = 0;
        objField.appendChild(subobjFieldturnd 🎜>      }
      return;
    情形 9:
      varobjField = canvas.createElement("v:polyline"))      var subobjField = canvas.createElement("v:fill");
      subobjField.setAttribute("opacity") =Chiappityo> );
      return setElement( objField);
    情況7:
      if(ShapeItemNum == 0) {
        objField.setAttribute("style") = "寬度：500；高度：309";
        objField.setAttribute("path") = "m " xo "," yo " l " xo "," yo   ShapeItemY = yo;
      }else {
        objField = canvas.documentElement.childNodes[0].lastChildiel🎜> ute("path") " " xo ","是的;;
return;
} break; 案例>案例5： var objfield = canvas.createelement（「 v：rect」）;
break ;
    情況 6:
      var objField = canvas.createElement("v:roundrect");
    break;
    狀況 8:
var objField = canvas.createElement("v:oval");
      break;
    案例10:
      🎜 > view.innerHTML = s;
return;
> 預設：回傳;
}
if（objfield）{    var subobjField = canvas.createElement("v:fill");
    subobjField .setAptribute gracity.
    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.Atuedmmo; =gradientBar. focusposition;
    objField.appendChild(subobjField);
    return setElement(objField);
  } 🎜>  drawKey = false;
  if(CurveItemNum > 0) CurveItemNum ;
  if(CurveItemNum > 3) CurveItemNum = 0;
        ShapeItemNum = 0;
      Element = canvas.documentElement.childNodes[0]. ] ,[0-9] $/
      var str = Element.getAttribute("path");
      Element.setAttribute("path") = str.replace(regerp    }
  }
}

function Paint() {
Element = canvas.documentElement.childNodes[0].lastChild);
y0 = Math.min(dy,yo);
x1 = Math .max (dx,xo);
y1 = Math.max(dy,yo); = "開關:"x0"; 下:"y0"; 開關:"(x1-x0)"; 開關:"( y1- y0)";";
if(CurveItemNum ==2) {
Element.setAttribute("control1") = xo "," Elementyou;
Element.setAttribute("control2") = Elementyou;break;
}
if(CurveItemNum ==3) {
Element.setAttribute("control2") = xo","yo;
break;
}
步驟3:
Element.setAttribute("to") = xo "," yo;
break;
步驟7:
var regerp = /[0-9] ,[0-9 $ /
var str = Element.getAttribute("path");
Element.setAttribute("path") = str.replace(regerp,xo"," yo);
break;
行5:
第6 行：
第8 行：
var regerp = /left. height:[0-9] ;/
var str = Element.getAttribute("style");
第9 頁：
var regerp = / [0-9] ,[0-9] $/
var str = Element.getAttribute("points");
Element.setAttribute(" points" " ") = str " " xo "," yo;
break;
預設:
break;
}

}

function init( ) {
tool_box_refresh(); // Inner_box_refresh
view.innerHTML = tree(canvas.documentElement); [ 0 ] ); .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("id");
node.childNodes [0].setAttribute("id");
node.childNodes [0].setAttribute("id");
node.childNodes [0]。 ("onClick") = "tool_box_select("id",this.title)";
var node1 = node.selectNodes("*/v:rect")[0];
if (id == ToolBarNum ) {
node1.setAttribute("fillcolor") = "#ffcccc"
node1.setAttribute("stylecolor") = "#ff0000"
}else {
node1. setAttribute("fillcolor" ) = "#ffffff"
node1.setAttribute("stylecolor") = "# 000000"
}
buffer = tree(node .childNodes[0]);
}
toolbox. innerHTML = buffer; > function tool_box_select ( v , t ) {
var key = ToolBarNum ;
ToolBarNum = v ;
tool_box_refresh ( ); > if ( key Item 7 & > Item = canvas . lastChild ;
var str = Item . = str " x e";
view.innerHTML = 樹(canvas.documentElement, 0);
  if(v == 10)
    if(textbox.style.visibility == "")
      textbox視覺性= "隱藏";
  NodeDelete = false;
  if(v == 1) {
    NodeDelete = true;
  ࠟ); > }
}

//顏色選擇
//var setcolorkey = color1;
function setcolor(c) {
  var setcolorkey = color1;
.
  varsetcolorkey = color1;
. c ;
}

函數gradientColor(v) {
  v.fillcolor = color1.fillcolor;
  gradientRefresh();
 。 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") = color  }
  gradientRefresh();
}
函數gradientPoint(v) {
  if(gradientX
 gradientX = xo  if(n   if(n > 108) n = 108;
  v.style.left = n;
gradientRefresh();
}
函數anglePoint(v) {
  angle.style.left = Math.floor((xo-516)/25)*25 8;
  gradientRefresh();
}
函數opacityPoint(v) {
  不透明度.style.left = Math.floor((xo-516)/25)*25 8;
  gradientRefresh();
}
  gradientRefresh()
;
}
function settype(v) {
  if(v.style.borderColor == "黑色")
    v.style.borderColor = "紅色"; "黑色";
  gradientRefresh();
}
function setGradientX() {
gradientX = -1;
}
函數gradientX = -1;
}
函數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 = 轉換1.fillcolor>;
gradientBar.color2.value = 變換4.fillcolor;
  if(type3.style. borderColor == "黑色")
    gradientBar.colors.value = ",";
  else
    gradientBar.colors.value = n1 "% "gragradient02.f5%" ;
  if(type1.style.borderColor == "black")
    gradientBar.type = "solid";
  else
  Bar style.borderColor == "red")
    gradientBar.type = "gradientradial";
  n1 = (parseInt(focus1.style.left)-8)/m*100;
 Intn2 focus2.style.left)-8)/m*100;
  gradientBar.focusposition.value = n1 "%," n2 "%";
  gradientBar.angle = (parseInt(angle.style.left)-  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(/WWTH:500;HEIGHT:500; ;HEIGHT:72")
  if(xmlHTTP.responseText.indexOf("錯誤:")!=-1) {
    alert(xmlHTTP.responseText);
    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)  if(Element.hasChildNodes) {
    for(var i=0;i      buffer = tree(Element) {    }
  }
  if(node)
    buffer = endElement(node,debug);
  return buffer;
}

/*** 以下三個函數請依需求自行修改 ******物件--節點開始
function onElement(Element,debug) {
  var buffer = (debug ? "  n = Element.attributes.length
if(n>0) {  // 若節點有參數
    for(var i=0;i      buffer = ' ' Element.attributes(i).name '="="' Elementname '="' Element .attributes(i).value '"';
  }
  buffer = debug ? ">" : ">";
  return buffer;
}

  return buffer;
}

  return buffer;
}
function endElement(Element,debug) {
  return (debug ? "" : "") Element.nodeName (debug ? ">
" : ">") ;
}

// 遍歷xml物件--節點資料

  return Element.nodeValue