Question

我将在javascript中绘制递归树，这是我现在所做的

<!DOCTYPE HTML>
<html>
<head>
<title >Canvas  Tree </title>
</head>
<body>
<canvas id="testCanvas"  width="800" height="800" >
canvas not supported
</canvas>
<script>
var canvas=document.getElementById('testCanvas');
var ctx=canvas.getContext('2d');
var alpha=-30*Math.PI/180;
var beta=35*Math.PI/180;
function tree(){
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-100);
ctx.stroke();
}
ctx.translate(400,650);
tree();
ctx.translate(0,-100);
ctx.rotate(alpha);
//ctx.rotate(beta);
tree();
ctx.rotate(beta-alpha);
tree();

</script>
</body>
</html>

我认为，我需要一些其他函数，它将被递归调用，在这个函数中会有基本情况，这里这个程序应该完成，一些绘图程序然后调用自己好几次，但我猜不出应该是什么是基础案例，也是如何实现它，请帮我实现这个新功能

Answer 1

一般来说，有两种方法可以解决这个问题：

简单地“画”一棵树（即画出构成你树的线条你已经开始在这里做了）
渲染树数据结构（使用一些外部JS库）。

第二种方法的好处是，您可以更准确地控制输出，并且不必编写绘制树的复杂代码。只是生成数据结构的简单代码。

例如，如果您专门处理Binary Trees，那么您可以通过这种方式随机创建二叉树（伪代码）：

function createRandomBinaryTree(aLevel):
if aLevel<4:
   thisNode = new(Node("someRandomLabel"))
   leftNode = Null
   rightNode = Null
   if random()>0.5:
      leftNode = createRandomBinaryTree(aLevel+1)
   else:
      rightNode = createRandomBinaryTree(aLevel+1)
   if leftNode!=Null:
      thisNode.leftNode = leftNode
   if rightNode!=Null:
      thisNode.rightNode = rightNode
   return thisNode
else return Null

在这种情况下，您有一个非常简单的数据结构，它由一个节点表示，该节点有两个指向其他两个节点的指针（这里称为左和右）。

（例如Node = {“label”：“Root”，“left”：{“label”：“RootLeft”，“left”：{}，“right”：{}}，“right”：{ “label”：“Root”，“RootRight”：{}，“right”：{}}}）

然后，您可以使用sigmaJS（或Raphael或D3或其他任何内容）来为您处理画布中的实际渲染。

用于生成此类渲染的不同Javascript库将具有用于表示上述“节点”的内部格式，因此必须稍微调整伪代码（在任何情况下，它都不是生成二进制树的唯一方法）随机的）。

我希望这会有所帮助。

递归树构造

1 个答案: