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

一般に、これについては2つの方法があります。

  1. 単に木を「描く」（つまり、ここで始めたように木を構成する線を描く）
  2. ツリーデータ構造をレンダリングします（外部JSライブラリを使用）。

2番目のアプローチの利点は、出力をより正確に制御できることと、ツリーを描画する複雑なコードを記述する必要がないことです。データ構造を生成する単純なコード。

たとえば、特にバイナリツリーを扱っている場合は、次の方法でランダムにバイナリツリーを作成できます（擬似コード）。

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

この場合、非常に単純なデータ構造があり、他の2つのノード（ここでは左と右と呼ばれます）への2つのポインターを持つノードで表されます。

（たとえば、Node = {"label"： "Root"、 "left"：{"label"： "RootLeft"、 "left"：{}、 "right"：{}}、 "right"：{"label" ："Root"、 "RootRight"：{}、 "right"：{}}}）

次に、sigmaJS（またはRaphaelやD3など）のようなものを使用して、キャンバスでの実際のレンダリングを処理できます。

このようなレンダリングを生成するためのさまざまなJavascriptライブラリには、上記の「ノード」を表す独自の内部形式があるため、擬似コードを少し調整する必要があります（いずれの場合も、ランダムにバイナリツリーを生成する唯一の方法ではありません）。

これがお役に立てば幸いです。

于 2012-04-27T09:36:33.957 に答える