VML描画タブレット②スクリプト - VMLgraph.js、XMLtool.js_PHPチュートリアル

脚本
*************
* VMLgraph.js
*************
var xo=0;
var yo=0;
var ox= 80;
var oy=20;
var dx=0;
var dy=0;
vardrawKey = 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;

functioncursor(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.ストロークカラー;
if(v.ストロークカラー == "赤")
v.ストロークカラー='# 000000';
else
v.drawingcolor='#ff0000';
}
function setOutColor(v) {
if(! NodeDelete) return;
v.drawingcolor = 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:ストローク");
subobjField.setAttribute("color") = color1.fillcolor;
subobjField.setAttribute("dashstyle") = crashstyle.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:normalnormalnormal16pt '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) {
ケース 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);
setElement (objフィールド);
}
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;
objフィールド。 setAttribute("path") = objField.getAttribute("path") + " "+xo+","+yo;
return;
}
ShapeItemNum++;
break;
case 5:
var objField = Canvas.createElement(" v:rect");
break;
ケース 6:
var objField = Canvas.createElement("v:roundrect");
objField.setAttribute("arcsize") = 0.2;
break;
ケース 8:
var objField = Canvas.createElement("v:oval");
break;
case 10:
s = "";
s =tree(canvas.documentElement,1);
view.innerHTML = s;
return;
default:
drawKey = false;
return;
}
if(objField) {
if(ToolBarNum != 7)
objField.setAttribute("style") = "左: "+xo+"; "+yo+"; 幅:0; 高さ: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 pattern() {
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 = "左:"+x0+"; 上:"+y0+"; 幅: "+(x1-x0)+"; 高さ:"+(y1-y0)+";";
switch(ToolBarNum) {
case 4:
if(CurveItemNum ==2) {
Element.setAttribute("control1 "）= xo+"、 "+yo; "）= xo+"、 "+yo; -9]+,[0-9]+$/
var str = Element.getAttribute("path");
Element.setAttribute("path") = str.replace(regerp,xo+","+yo);
ブレーク;
ケース5：
ケース6：
ケース8：
var regerp = /left.+height:1height：++ /
var str = element.getattribute（ "style"）; ("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() {
varbuffer = "";
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("ストロークカラー") = "#ff0000"
}else {
node1.setAttribute("fillcolor") = "#ffffff"
node1.setAttribute("ストロークカラー") = "#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 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 = = "黒")
gradientBar.type = "ソリッド";
else
gradientBar.type = "グラデーション";
if(type2.style.borderColor == "赤")
gradientBar.type = "グラデーションラジアル";
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) {
varbuffer = "";
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) 、デバッグ);
}
}
if(node)
バッファ += endElement(node,debug);
return バッファ;
}

/***** 以下の 3 つの関数を必要に応じて変更してください *****/
// XML オブジェクトのトラバース -- ノード開始
関数 onElement(Element,debug) {
varbuffer = (debug ? "<" : "<") + Element.nodeName;
n = Element.attributes.length
if(n>0) { // ノードにパラメータがある場合
for(var i=0;i バッファ += ' ' + Element.attributes(i).name + '="' + Element.attributes(i).value + '"';
}
バッファ += debug ? ">" : ">";
returnbuffer;
}

// XML オブジェクトを走査します -- ノード end
function endElement(Element,debug) {
return (debug ? "
" : ">");
}

// XML オブジェクトのトラバース -- ノード データ
function onData(Element) {
Element.nodeValue を返す
}

http://www.bkjia.com/PHPjc/314076.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/314076.html技術記事スクリプト*************** * VMLgraph.js ************ var xo=0; var ox=80; oy=20; var dx=0; vardrawKey = 0; var ShapeItemNum = 0;