VML绘图板⑤浏览–view.php

changboter — Tue, 10 Nov 2009 14:43:19 +0000

VML绘图板

作品展示

// 变量num为保存的vml文档总数，这里仅简单的指定。请根据实际的组织调整
$num = 10;
for($i=1;$i<=$num;$i++)
echo sprintf(”%4d\n”,$i,$i);
?>

查看VML代码

VML绘图板④简化的服务器端–server.php、server.asp

changboter — Tue, 10 Nov 2009 14:41:13 +0000

服务器端
************
* server.php
************
$s = $HTTP_RAW_POST_DATA;
$t = gettimeofday();
$n = $t[sec].$t[usec];
$filename = “vml/” .$n. “.txt”;
$fp = fopen($filename,”w”);
fwrite($fp,$s);
fclose($fp);
echo $s;
?>

************
* server.asp
************
<%@ Language=VBScript %>
<%
Response.expires=-1
dim xmlrec
set xmlrec=server.CreateObject(”microsoft.xmldom”)
xmlrec.async=false
xmlrec.load(Request)
xmlrec.save Server.MapPath(”.”)&”\xxxx.xml”
%>

VML绘图板③资源–VMLgraph.xml

changboter — Tue, 10 Nov 2009 14:40:28 +0000

资源
***************
* VMLgraph.xml
***************

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

changboter — Tue, 10 Nov 2009 14:39:43 +0000

脚本
*************
* 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 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 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 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 ? “
” : “>”);
}

// 遍历xml对象–节点数据
function onData(Element) {
return Element.nodeValue
}

燕之庐网站建设 » vml

VML绘图板⑤浏览–view.php

VML绘图板④简化的服务器端–server.php、server.asp

VML绘图板③资源–VMLgraph.xml

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