VML绘图板②脚本--VMLgraph.js、XMLtool.js
作者:--Fac_k- | 来源:互联网 | 2018-03-18 19:13
VML绘图板②脚本--VMLgraph.js、XMLtool.js?7.1.2
脚本 ************* * 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) <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 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 <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 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 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 }
推荐阅读
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ...
[详细]
蜡笔小新 2023-12-14 16:12:01
本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ...
[详细]
蜡笔小新 2023-12-14 14:25:33
本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ...
[详细]
蜡笔小新 2023-12-14 18:23:25
本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 18:16:27
本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ...
[详细]
蜡笔小新 2023-12-14 17:03:58
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
本文介绍了PHP设置MySQL字符集的方法,详细介绍了使用mysqli_set_charset函数来规定与数据库服务器进行数据传送时要使用的字符集。通过示例代码演示了如何设置默认客户端字符集。 ...
[详细]
蜡笔小新 2023-12-14 15:30:33
本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ...
[详细]
蜡笔小新 2023-12-14 15:25:15
本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
[详细]
蜡笔小新 2023-12-14 15:08:18
最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ...
[详细]
蜡笔小新 2023-12-14 14:06:10
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ...
[详细]
蜡笔小新 2023-12-14 12:55:15