|
mls_tod
Član broj: 176231
Poruke: 2
*.amres.ac.rs.
|
I evo odgovora! Ne mogu da verujem da niko nije ponudio neko resenje!?
<!DOCTYPE html>
<html>
<head>
<title>BinaryTree</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function Tree(x, y, width, height, ctx) {
this.draw = function(){
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (x, y, width, height);
ctx.rect(x, y, width, height);
};
};
function formSubmit() {
n = document.getElementById('first').value;
if (n==null || n==""){formReset();
alert("Enter the number in the blank text box");}
else drawTree(n);
}
function formReset() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var rectWidth = 10000;
var rectHeight = 4000;
ctx.clearRect (0, 0, rectWidth, rectHeight);
document.getElementById('first').value = null;
}
function drawTree(depth) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var nodeWidth = 30;
var nodeHeight = 30;
var rectWidth = 10000;
var rectHeight = 4000;
ctx.clearRect (0, 0, rectWidth, rectHeight);
for(i = 0; i <=depth; i++) {
for(j = 0; j < Math.pow(2, i); j++) {
var canvasWidth = Math.pow(2, depth) * nodeWidth + (Math.pow(2, depth) / 2 - 1) * nodeWidth + Math.pow(2, depth) / 2 * 3 * nodeWidth + nodeWidth;
var canvasHeight = depth * 2 * nodeHeight;
var nodeSpace = canvasWidth / Math.pow(2, i);
var x = nodeSpace / 2 - nodeWidth / 2 + nodeSpace * j;
var y = canvasHeight - i * nodeHeight * 1.5;
var node = new Tree(x, y, nodeWidth, nodeHeight, ctx);
node.draw();
if(i < depth) {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(x + nodeWidth / 2, y);
ctx.lineTo(x - nodeSpace / 4 + nodeWidth / 2, y - nodeHeight / 2);
ctx.stroke();
ctx.moveTo(x + nodeWidth / 2, y);
ctx.lineTo(x + nodeSpace / 4 + nodeWidth / 2, y - nodeHeight / 2);
ctx.stroke();
}
}
}
}
</script>
</head>
<body>
<form id="frm1" action="form_action.asp">
Enter Depth: <input id="first" type="text" name="fname" /><br />
<input type="button" onclick="formSubmit()" value="Submit form" />
<input type="button" onclick="formReset()" value="Reset" />
</form>
<canvas id="myCanvas" width="10000" height="4000"></canvas>
</body>
</html>
|
Kako napraviti u javaScriptu binarno stablo gde korisnik unosi nivo grananja(depth)?
Re: Kako napraviti u javaScriptu binarno stablo gde korisnik unosi nivo grananja(depth)?
