Html5practice/계층형자료구조그리기 - Revision history

Maintenance script: Repair batch-0008 pages from live compare

2026-03-27T01:40:37Z

Repair batch-0008 pages from live compare

← Older revision		Revision as of 01:40, 27 March 2026
Line 1:		Line 1:
	~~[[pagelist~~(html5practive)~~]]~~		<!-- MONIWIKI PageList(html5practive) -->[[Special:PrefixIndex/html5practive\|html5practive 관련 문서 목록]]
	== html ==		== html ==
	<html xmlns="http://www.w3.org/1999/xhtml">		<html xmlns="http://www.w3.org/1999/xhtml">
Line 21:		Line 21:
	var NodeTextColor = "black";		var NodeTextColor = "black";

	var RootNode = {"text":"hello html5", "child":[{"text":"html5 is gooooooood", "child":null}		var RootNode = {"text":"hello html5", "child":[{"text":"html5 is gooooooood", "child":null}
	, {"text":"this is true", "child":[{"text":"beonit", "child":null}		, {"text":"this is true", "child":[{"text":"beonit", "child":null}
	, {"text":"enoch", "child":[{"text":"beonit", "child":null}		, {"text":"enoch", "child":[{"text":"beonit", "child":null}
	, {"text":"loves", "child":null}]		, {"text":"loves", "child":null}]
	}		}
	, {"text":"loves", "child":null}]		, {"text":"loves", "child":null}]

	}, {"text":"test", "child":null}]		}, {"text":"test", "child":null}]
	};		};

Line 59:		Line 59:

	function measureNode(node){		function measureNode(node){
	node["height"] = 0;		node["height"] = 0;
	// no child		// no child
	if( node.child == null ){		if( node.child == null ){
Line 69:		Line 69:
	var childLen = node.child.length;		var childLen = node.child.length;
	for( var i in node.child ){		for( var i in node.child ){
	node.height += measureNode(node.child[i]);		node.height += measureNode(node.child[i]);
	}		}
	console.log("text:" + node.text + " nodeHeight:", node.height);		console.log("text:" + node.text + " nodeHeight:", node.height);
Line 92:		Line 92:
	var childHeight = 0;		var childHeight = 0;
	for( var i in node.child ){		for( var i in node.child ){
	childHeight = node.child[i].height;		childHeight = node.child[i].height;
	console.log(node.text, "child", childLen, "startY", startY, "childHeight", childHeight);		console.log(node.text, "child", childLen, "startY", startY, "childHeight", childHeight);
	nodeDraw(ctx, x + calcRt.width + NodePaddingW * 2 + NodeMarginW, startY + childHeight/2, node.child[i]);		nodeDraw(ctx, x + calcRt.width + NodePaddingW * 2 + NodeMarginW, startY + childHeight/2, node.child[i]);
	startY += childHeight;		startY += childHeight;
	}		}

Maintenance script: Repair MoniWiki formatting after migration

2026-03-26T14:01:49Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 14:01, 26 March 2026
Line 114:		Line 114:
	nodeDraw(ctx, 100, 100, RootNode);		nodeDraw(ctx, 100, 100, RootNode);
	}		}

imported>beonit at 04:01, 23 October 2010

2010-10-23T04:01:14Z

New page

[[pagelist(html5practive)]]
== html ==
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas test</title>
<script src="test.js" language="javascript" type=""></script>
</head>
<body onload="main()" style="background-color:darkgray">
<canvas id="canvas" width="500px" height="500px" style="background-color:gray"/>
</body>
</html>

== javascript ==
var NodePaddingW = 3;
var NodePaddingH = 3;
var NodeMarginW = 15;
var NodeMarginH = 3;
var NodeRadius = 5;
var NodeFontHeight = 15;
var NodeBGColor = "yellow";
var NodeTextColor = "black";

var RootNode = {"text":"hello html5", "child":[{"text":"html5 is gooooooood", "child":null}
, {"text":"this is true", "child":[{"text":"beonit", "child":null}
, {"text":"enoch", "child":[{"text":"beonit", "child":null}
, {"text":"loves", "child":null}]
}
, {"text":"loves", "child":null}]

}, {"text":"test", "child":null}]
};

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}

function measureNode(node){
node["height"] = 0;
// no child
if( node.child == null ){
node.height = NodeFontHeight + NodePaddingH * 2 + NodeMarginH * 2;
console.log("text:" + node.text + " nodeHeight:", node.height);
return node.height;
}
// has child
var childLen = node.child.length;
for( var i in node.child ){
node.height += measureNode(node.child[i]);
}
console.log("text:" + node.text + " nodeHeight:", node.height);
return node.height;
}

function nodeDraw(ctx, x, y, node){
// calc rect
var calcRt = ctx.measureText(node.text);
// console.log("text:" + node.text + " pos:" + x + ", " + y + " width:" + calcRt.width + " height:" + node.height);
// draw rect
ctx.fillStyle = NodeBGColor;
roundRect(ctx, x-NodePaddingW, y-NodePaddingH, calcRt.width + NodePaddingW*2, NodeFontHeight + NodePaddingH*2, NodeRadius, true, true);
// draw text
ctx.fillStyle = NodeTextColor;
ctx.fillText(node.text, x, y);
// draw child
if( node.child == null )
return NodeFontHeight + NodePaddingH * 2 + NodeMarginH * 2;
var childLen = node.child.length;
var startY = y - node.height/2 + NodeMarginH * 2;
var childHeight = 0;
for( var i in node.child ){
childHeight = node.child[i].height;
console.log(node.text, "child", childLen, "startY", startY, "childHeight", childHeight);
nodeDraw(ctx, x + calcRt.width + NodePaddingW * 2 + NodeMarginW, startY + childHeight/2, node.child[i]);
startY += childHeight;
}
}

function main(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext){
return;
}
var ctx = canvas.getContext('2d');
ctx.font = NodeFontHeight + "px sans-serif";
ctx.textBaseline = "top";
ctx.fillStyle = "yellow";
console.log("make node start");
console.log("measure node start");
measureNode(RootNode);
console.log("draw node start");
nodeDraw(ctx, 100, 100, RootNode);
}