VML drawing board ② script-VMLgraph. js and XMLtool. js

Source: Internet
Author: User


Script
*************
* 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; // preset tool number
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.doc umentElement, 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.doc umentElement, 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.doc umentElement. childNodes [0]. removeChild (node );
View. innerHTML = tree(canvas.doc umentElement, 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 16pt 'arial black '";
Node. appendChild (subobjField );
}
Canvas.doc umentElement. 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.doc umentElement. 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.doc umentElement, 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.doc umentElement. 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.doc umentElement, 0 );
}
}
}

Function paint (){
Element = canvas.doc umentElement. 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 ("");
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 (); // initial Toolbar
View. innerHTML = tree(canvas.doc umentElement); // initial drawing Area
Color. innerHTML = tree (tools. selectNodes ("*/colorbar") [0]); // select the initial color
Linebox. innerHTML = tree (tools. selectNodes ("*/linebox") [0]); // select the initial line type
GradientBox. innerHTML = tree (tools. selectNodes ("*/gradient") [0]); // fill the initial
}

// Draw the toolbar
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;
}

// Select a tool
Function tool_box_select (v, t ){
Var key = ToolBarNum;
ToolBarNum = v;
Tool_box_refresh ();
Hoke ();
If (v = 7 ){
If (key = 7 & ShapeItemNum> 0 ){
Element = canvas.doc umentElement. childNodes [0]. lastChild;
Var str = Element. getAttribute ("path ");
Element. setAttribute ("path") = str + "x e ";
View. innerHTML = tree(canvas.doc umentElement, 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.doc umentElement, 0 );
}
}

// Color Selection
// Var setcolorkey = color1;
Function setcolor (c ){
Var setcolorkey = color1;
Setcolorkey. fillcolor = c;
}

Function gradientColor (v ){
V. fillcolor = color1.fillcolor;
GradientRefresh ();
Return;
Var m = tools.doc umentElement. selectNodes ("/*/gradient // v: shape"). length;
Var node = tools.doc umentElement. 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
*************

// Transfer the XML document to the server
Function saveXML ()
{
Var xmlHTTP = new ActiveXObject ("Microsoft. XMLHTTP ");
XmlHTTP. open ("POST", "server. php", false); // server. ASP is used when asp is used.
XmlHTTP. setRequestHeader ("Contrn-type", "text/xml ");
XmlHTTP. setRequestHeader ("Contrn-charset", "gb2312 ");

XmlHTTP.send(tree(canvas.doc umentElement ));
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 );
}
}

// Traverse the xml Object and parse the core function set of 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;
}

/***** Modify the following three functions as needed *****/
// Traverse the xml Object-start the node
Function onElement (Element, debug ){
Var buffer = (debug? "<": "<") + Element. nodeName;
N = Element. attributes. length
If (n> 0) {// if the node has Parameters
For (var I = 0; I <n; I ++)
Buffer + = ''+ Element. attributes (I). name + '= \"' + Element. attributes (I). value + '"';
}
Buffer + = debug? ">": "> ";
Return buffer;
}

// Traverse xml Object-end of Node
Function endElement (Element, debug ){
Return (debug? "</": "</") + Element. nodeName + (debug? "> <Br>": "> ");
}

// Traverse the xml Object-node data
Function onData (Element ){
Return Element. nodeValue
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.