Rumah pembangunan bahagian belakang tutorial php VML绘图板②脚本--VMLgraph.js、XMLtool.js_PHP教程

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

Jul 21, 2016 pm 04:11 PM
d var VML Skrip


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

www.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...
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk membuat skrip untuk penyuntingan? Tutorial cara membuat skrip melalui penyuntingan Bagaimana untuk membuat skrip untuk penyuntingan? Tutorial cara membuat skrip melalui penyuntingan Mar 13, 2024 pm 12:46 PM

Bagaimana untuk membuat skrip untuk penyuntingan? Tutorial cara membuat skrip melalui penyuntingan

Skrip Python akan dilaksanakan setiap 5 minit Skrip Python akan dilaksanakan setiap 5 minit Sep 10, 2023 pm 03:33 PM

Skrip Python akan dilaksanakan setiap 5 minit

Skrip Python untuk mematikan komputer Skrip Python untuk mematikan komputer Aug 29, 2023 am 08:01 AM

Skrip Python untuk mematikan komputer

Bagaimana untuk melaksanakan fail .sh dalam sistem Linux? Bagaimana untuk melaksanakan fail .sh dalam sistem Linux? Mar 14, 2024 pm 06:42 PM

Bagaimana untuk melaksanakan fail .sh dalam sistem Linux?

Pakej skrip Python exe, auto-py-to-exe akan membantu anda! Pakej skrip Python exe, auto-py-to-exe akan membantu anda! Apr 13, 2023 pm 04:49 PM

Pakej skrip Python exe, auto-py-to-exe akan membantu anda!

Skrip Python untuk memulakan semula komputer Skrip Python untuk memulakan semula komputer Sep 08, 2023 pm 05:21 PM

Skrip Python untuk memulakan semula komputer

Tutorial Skrip Windows PowerShell untuk Pemula Tutorial Skrip Windows PowerShell untuk Pemula Mar 13, 2024 pm 10:55 PM

Tutorial Skrip Windows PowerShell untuk Pemula

Super tegar! 11 contoh skrip Python dan Shell yang sangat praktikal! Super tegar! 11 contoh skrip Python dan Shell yang sangat praktikal! Apr 12, 2023 pm 01:52 PM

Super tegar! 11 contoh skrip Python dan Shell yang sangat praktikal!

See all articles