0

我将在 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>

我想，我需要一些可以递归调用的另一个函数，在这个函数中会有基本情况，这里这个过程应该完成，一些绘图过程然后调用自己几次，但我猜不出应该是什么基本情况,还有如何实现它,请帮我实现这个新功能

4

1 回答 1

1

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

  1. 简单地“画”一棵树（即画出构成你的树的线条，就像你在这里开始做的那样）
  2. 渲染树数据结构（使用一些外部 JS 库）。

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

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

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 表示，它有两个指向其他两个节点的指针（这里称为 left 和 right）。

（例如 Node = {"label":"Root","left":{"label":"RootLeft","left":{},"right":{}},"right":{"label" :"Root","RootRight":{},"right":{}}}）

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

用于生成此类渲染的不同 Javascript 库将有自己的内部格式来表示上面提到的“节点”，因此必须稍微调整伪代码（无论如何，这不是随机生成二叉树的唯一方法）。

我希望这有帮助。

于 2012-04-27T09:36:33.957 回答