用Flex画横向二叉树

 

用 Flex 整理了一个横向二叉树的需求,形状就如上图所示

是一个二叉树的结构，可怎么画出来却费了很多脑筋

最后确认的思路就是：从右往左，从上到下顺序遍历节点，然后由全局的变量保持横向节点的x坐标，和纵向节点的y坐标

首先遍历右节点，存在右节点的子右节点则进栈，不存在子右节点的话 将当前节点出栈，

遍历刚出栈的节点的左节点，在其中继续遍历右节点，如此反复，终于画了出来。

 

注：先出栈在遍历其左节点！

 

核心代码如下

private var WIDTH_SPACE:uint=200; private var MAX_WIDTH:uint=0; private var NODE_HIGHT_SPACE:uint=40; private var oRoot:BinaryTreeNode; private var hCount:int=0; private var vCount:int=0; private var temp:Array=[]; private function orderRightChild(oNode:BinaryTreeNode):void { if (oNode == null) return; var rightChild:BinaryTreeNode=oNode.rightNode; if (rightChild) { temp.push(rightChild); rightChild.x=oNode.x + WIDTH_SPACE; if (MAX_WIDTH < rightChild.x) { MAX_WIDTH=rightChild.x; } rightChild.y=oNode.y; orderRightChild(rightChild); } else { vCount=vCount + 1; orderLeftChild(temp.pop()) } } private function orderLeftChild(oNode:BinaryTreeNode):void { if (oNode == null) return; //trace(oNode.oText); var leftChild:BinaryTreeNode=oNode.leftNode; if (leftChild) { //trace(leftChild.oText); temp.push(leftChild); leftChild.x=oNode.x; leftChild.y=vCount * NODE_HIGHT_SPACE //leftChild.x=oNode.x + WIDTH_SPACE; orderRightChild(leftChild); } else { vCount=vCount + 1; orderLeftChild(temp.pop()); } } BinaryTreeNode.as package { import mx.containers.Canvas; import mx.core.UIComponent; import mx.events.FlexEvent; public class BinaryTreeNode extends Canvas { public var leftNode:BinaryTreeNode; public var rightNode:BinaryTreeNode; public var parentNode:BinaryTreeNode; public var nodeData:*; public function BinaryTreeNode(obj:*) { this.nodeData=obj; parentNode=leftNode=rightNode=null; } public function isLeaf():Boolean { if (this.leftNode == null && this.rightNode == null) { return true; } return false; } } }