Html RubyonRails：绘制动态ascii艺术的好方法是什么？

我想制作一个将二叉树显示为ascii的应用程序。用户可以从根节点开始，然后选择向左或向右创建节点。在任何时候，用户都可以返回到父节点并沿着树的另一个分支向下移动以创建更多节点。从面向对象的角度来看，这是非常容易的，但我在以图形方式创建它时遇到了困难

我想通过让变量包含一个字符串来实现这一点，该字符串表示ascii中的左右节点。假设一个用户在根节点上，他们试图创建一个左节点，那么左节点字符串将自身附加到根节点

这方面的问题是：

---

如何“保存”根节点的位置，从中追加左_节点？这是一个好方法吗？有什么我遗漏的吗

使用保存所有信息的节点对象。例如，一个简单的对象可以如下所示：

function TreeNode(parent, text, x, y) {
    this.parent = parent;                 // if null then this is the root
    this.text = text || 'node';
    this.x = x || 0;
    this.y = y || 0
}

现在，您可以通过将节点指定给上一个节点和/或父节点来创建树：

var tree = [];

var root = new TreeNode(null, "Root", 50, 50);
var nodeLeft = new TreeNode(root, "Left", 50, 50);
var nodeRight = new TreeNode(root, "Right", 50, 50);

等等（您可能需要一种可视化的编辑方法）。按任意顺序将它们推送到阵列中（父引用跟踪连接）

只需在数组上迭代两次，一次在两个节点之间绘制连接，第二次在顶部绘制节点（通过更精确地使用连接线，您可以只使用一个循环，而在本例中我没有这样做）

有关更多详细信息和实时演示，请参见下面的源代码：

//节点对象
函数树节点（父、文本、x、y）{
this.parent=parent | | null；//如果为null，则这是根
this.text=文本| |'节点'；
这个.x=x | | 0；
这个.y=y | | 0
}
//获取画布上下文
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
//保存所有节点
var-tree=[]；
//一些示例节点
var root=新的树节点（null，“root”，250，140）；
//根节点的子节点
var nodeLeft=新的树状结构（根，“左”，140，85）；
var nodeRight=新的树形节点（根，“右”，360，85）；
//左淋巴结的子代
var nodeLeftL=新树节点（nodeLeft，“从左到左”，70,30）；
var nodeLeftR=新树节点（nodeLeft，“从右到左”，220,30）；
//将所有节点存储在数组中
推送（根、nodeLeft、noderRight、nodeLeftL、nodeLeftR）；
//渲染
//联系
for（变量i=0；节点=树[i]；i++）{
renderLine（节点，节点，父节点）；
}
//节点
for（变量i=0；节点=树[i]；i++）{
renderNode（节点）；
}
//以下是画布图形功能：
//渲染任意两个节点之间的线：
函数renderLine（n1，n2）{
//检查我们是否有两个尽可能多的节点
//成为根节点（根节点当然没有父节点）
如果（n1和n2）{
//在艺术上击倒自己。。。
ctx.strokeStyle='rgba（0,0,0,0.2）'；
ctx.lineWidth=1；
//线路
ctx.beginPath（）；
ctx.moveTo（n1.x，n1.y）；
ctx.lineTo（n2.x，n2.y）；
ctx.stroke（）；
}
}
//渲染节点本身
函数renderNode（节点）{
ctx.font='bold 14px monospace'；
ctx.textAlign='中心'；
ctx.textb基线='中间'；
ctx.fillStyle='#555'；
ctx.fillText（'.--------------'，node.x，node.y-14）；
fillText（node.text，node.x，node.y）；
ctx.fillText（“| |”，node.x，node.y）；
ctx.fillText（'------------'，node.x，node.y+14）；
}

---

在一句话中，你的问题到底是什么？这太棒了。谢谢你，肯。我会实施这项计划