Raoul Keller: XML-Attribute lassen sich beim Namen nennen

Beitrag lesen

SELF-Forum

XML-Attribute lassen sich beim Namen nennen

Raoul Keller
– Informationen zu den Bewertungsregeln

Das Ganze befindet sich auch unter http://inculta.net/gurumi
So funktioniert es jetzt ja auch (außer im absichtlich ausgesparten IE), aber eben nicht über den Attributnamen sondern nur über den Attributes-Array.

Javasctipt-Datei:
---------------------------------------------------------------------

  
var drawTree =  
	{  
	canvas: false,  
	context: false,  
	init: function(canvasID)  
		{  
		drawTree.canvas = document.getElementById(canvasID);  
		drawTree.context = drawTree.canvas.getContext('2d');  
		},  
	loadXML: function(uri)  
		{  
		var request, content;  
		request = new XMLHttpRequest();  
		request.open("GET", uri, true);  
		request.onreadystatechange = function()  
			{  
			if(request.readyState == 4)  
				{  
				content = request.responseXML;  
				drawTree.xmlTree = content;  
  
				drawTree.createPath();  
				}  
			}  
		request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
		request.send(null);  
		},  
	createPath: function()  
		{  
		if(typeof drawTree.xmlTree == 'object')  
			{  
			var context = drawTree.context;  
			var xml = drawTree.xmlTree;  
			var strokes = xml.getElementsByTagName('branch');  
  
/*			var dump = '';  
			for(var i = 0; i < strokes[0].attributes.length; i++)  
				{  
				dump += strokes[0].attributes[i].nodeName + ': ' + strokes[0].attributes[i].nodeValue + "\n";  
				}  
			alert(dump);  
*/  
			for(var i = 0; i < strokes.length; i++)  
				{  
				context.beginPath();  
				context.lineWidth = strokes[i].attributes[5].nodeValue;  
				context.moveTo(strokes[i].attributes[1].nodeValue,strokes[i].attributes[2].nodeValue);  
				context.lineTo(strokes[i].attributes[3].nodeValue,strokes[i].attributes[4].nodeValue);  
				context.stroke();  
				}  
			}  
		}  
	}  
  
window.onload = function()  
	{  
	drawTree.init('canvas');  
	drawTree.loadXML('http://inculta.net/gurumi/tree.php');  
	}  
  


  
  
HTML-Datei  
-------------------------------------------------------------------  
  
<html>  
	<head>  
		<title>sakura.gurumi</title>  
		<script type="text/javascript" src="script.js"></script>  
		<style type="text/css">  
			canvas  
				{  
				border: 2px solid #444444;  
				}  
			body  
				{  
				background-color: #fffef5;  
				font: 13px sans-serif;  
				color: #333333;  
				text-align: center;  
				}  
			#container  
				{  
				margin-left: auto;  
				margin-right: auto;  
				margin-top: 21px;  
				text-align: center;  
				}  
		</style>  
	</head>  
	<body>  
		<div id="container">  
			<canvas id="canvas" width="800" height="600"></canvas>  
		</div>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln