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


Posted in PHP onOctober 09, 2006

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

PHP 相关文章推荐
同时提取多条新闻中的文本一例
Oct 09 PHP
php 采集书并合成txt格式的实现代码
Mar 01 PHP
php str_pad() 将字符串填充成指定长度的字符串
Feb 23 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
May 06 PHP
php共享内存段示例分享
Jan 20 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
Mar 02 PHP
PHP匿名函数和use子句用法实例
Mar 16 PHP
PHP实现清除MySQL死连接的方法
Jul 23 PHP
php实现通过soap调用.Net的WebService asmx文件
Feb 27 PHP
swoole_process实现进程池的方法示例
Oct 29 PHP
浅谈PHP各环境下的伪静态配置
Mar 13 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
May 02 PHP
example1.php
Oct 09 #PHP
一个ftp类(ini.php)
Oct 09 #PHP
php中数据的批量导入(csv文件)
Oct 09 #PHP
第四节 构造函数和析构函数 [4]
Oct 09 #PHP
PHP5 安装方法
Oct 09 #PHP
Classes and Objects in PHP5-面向对象编程 [1]
Oct 09 #PHP
第二节 对象模型 [2]
Oct 09 #PHP
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
kali中python版本的切换方法
2019/07/11 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python实现批量文件重命名
2019/10/31 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
python开根号实例讲解
2020/08/30 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
.NET程序员的几道面试题
2012/06/01 面试题
2014升学宴答谢词
2014/01/26 职场文书
对祖国的寄语大全
2014/04/11 职场文书
反邪教标语
2014/06/23 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
毕业生入职感言
2015/07/31 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers