• 概述
  • 节点编辑器
• STNodeEditor
  • 属性
  • 受保护字段
  • 可重载函数
  • 公开函数
  • 事件
• STNode
  • 属性
  • 受保护字段
  • 可重载函数
  • 其他重载函数
  • 公开函数
  • 关于重绘
• STNodeOption
  • 属性
  • 受保护字段
  • 构造器
  • 可重载函数
  • 公开函数
  • 事件
• STNodeOptionEventArgs
  • 属性
• STNodeControl
  • Demo

概述

那是一个冬季 在研究无线电安全的作者接触到了GNURadio 那是作者第一次接触到节点编辑器
  "What? Excuse me... What's this?.. 这是什么鬼东西?..."

那是一个春季 不知道为什么 过完年整个世界都变了 大家被迫窝在家里 无聊至极的作者学起了Blender 那是作者第二次接触到节点编辑器
  "Wo...原来这东西可以这么玩...真方便"
  于是一些想法在作者脑中逐渐诞生 让作者有了想做一个这样的东西的想法

那是一个夏季 不知道为什么 作者又玩起了Davinci 那是作者第三次接触到节点编辑器 这一次的接触让作者对节点编辑器的好感倍增 作者瞬间觉得 只要是可以模块化流程化的功能 万物皆可节点化

本案例中只是提供了一个节点编辑器控件 并不包含节点列表 属性编辑器等 若后期有空再做一套完整的框架

或许你未曾接触过节点编辑 但节点编辑的影子越来越多 尤其是在影视相关的一些设计类软件当中 Blender,C4D,Houdini,Davinci 等

节点编辑最大的好处就是可视化操作 将单一的功能点封装到节点之中 让用户通过节点布线来组合自己需要的逻辑 让整个流程可视化 而不是将你程序的整个执行流程固化在你的程序之中 当然在这之前你需要定义好节点的数据类型 因为数据类型无法兼容是不允许连线的 通常情况下同颜色的连接点表示数据类型相同

另一个好处 让开发者只需要注重单一的功能点开发 使得功能与功能之间的耦合度降低 开发者在节点中开发完成需要的功能 无需知道应该把数据交给谁或者怎么去传递数据 只需要将你的结果数据打包给你所继承的节点类 节点编辑器会自动完成数据的投递过程

STNodeEditor

STNodeEditor为节点容器 其中最重要的一个属性为Nodes里面包含了画布中能看到的所有节点

STNodeEditor有两套坐标系统 平常情况下使用最多的就直接是控件的坐标系统 需要在控件的什么位置绘图或者添加东西采用的都是相对控件左上角的坐标 但是在节点编辑器中的情况比较复杂 需要引入一个画布的概念 画布是可以移动缩放的 所以在绘图的时候依旧采用控件的坐标系统将带来很多的麻烦 所以为画布定义了一个坐标原点 在节点以及连线绘制的时候采用的是画布的坐标系统 当需要拖动画布位置的时候 改变画布原点的位置就好了 而内部节点的位置依旧不做变更 因为节点采用的坐标位置是相对画布原点的
当画布中Nodes没有元素时候 画布将处于重置状态无法缩放与移动 因为作者觉得这样的操作没有任何意义

• TypeColor
  • 此属性为当前STNodeEditor中所有的数据类型所对应的颜色 节点中所有的数据类型都应当包含在此集合中 即便有动态需要加载的未知类型的节点 那么对应的节点也应该在节点的OnOwnerChanged()中向容器提交自己数据类型以及对应颜色
    若节点有单独对STNodeOption.DotColor设置值 则忽略该对照表中的颜色 即不为默认颜色Color.Transparent

---

• UnknownTypeColor
  • 若节点中并没有单独设置数据类型颜色且在TypeColor中无法匹配时候采用此值 所以将此特殊类型单独设置

• Option(Dis)Connected
  • 此事件触发时并不代表当前画布中的节点连线成功 请通过获取事件参数中的Status字段进行判断
    但是STNodeOption.Connected事件是成功后才触发 之所以要这样设计是因为考虑到 对于STNodeEditor来说 它需要知道一个连接的状态 即使连接不成功也应当告知前端用户为什么会连接不成功 所以失败和成功都会触发事件

---

• Option(Dis)Connecting
  • 此事件是在连接或者断开连接正在发生的时候触发 可通过事件参数Continue来决定是否继续或者停止操作

STNode

STNode为抽象类 不可实例化 需要用户自己继承重写

STNode有三个比较重要的属性InputOptionsOutputOptionsControls

若把STNodeEditor类比成桌面 那么STNode就可以类比成一个窗体 虽然作者在节点中提供了Controls集合 但是作者没有提供任何的一个封装好的控件 只提供了一个STNodeControl基类 若有需要用户可继承此类绘制自己需要的控件

继承STNode必须提供空参构造器 否则对节点进行保存后无法还原节点 因为还原过程并非序列化 而是通过反射重新构造对象

• Lock(Option/Location)
  • 
    LockOption被设定后左上角会出现一把锁 表示节点内所有选项不再接受连接 但可以与其他节点选项断开连接 但是其他节点也同为被锁定状态 则无法断开
    LockLocation被设定后右上角会出现一枚图钉 表示节点位置不再接受设置

在上述属性中除了MarkLeftTop其余均为只读属性 被protected所修饰 仅继承STNode后才可访问 不然作者觉得太危险了 比如下面这段代码

NodeXXX.Owner.Nodes[nIndex].InputOptions.RemoveAt(0);

节点都是模块化的 可能会有不同的人来做开发 甚至是以插件的方式提供 如果大家都遵守约定那将很好 可如果一旦有人不遵守约定 或者出现意外情况 那么就可能出现跨节点操作 破坏掉原本一个正常的节点 如果确实有需要请更改源代码

protected override void OnSaveNode(Dictionary<string, byte[]>) {
    dic.Add("count", BitConverter.GetBytes(this.InputOptionsCount));
}

protected internal override void OnLoadNode(Dictionary<string, byte[]> dic) {
    int nCount = BitConverter.ToInt32(dic["count"], 0);
    while (this.InputOptionsCount < nCount && this.InputOptionsCount != nCount) 
        this.Addhub();
}
                

上面代码片段为STNodeHub重载 当需要保存时候此节点需要保存当前已拥有的行数 还原的时候需要将行数还原 因为新构造的节点只有一行 若上面已有连线关系的时候只有一行可能无法正常还原连线关系

protected override void OnSaveNode(Dictionary<string, byte[]>) {
    dic.Add("file", Encoding.UTF8.GetBytes(m_str_file));
}

protected override void OnLoadNode(Dictionary<string, byte[]> dic) {
    m_str_file = Encoding.UTF8.GetString(dic["file"]);
    if (System.IO.File.Exists(m_str_file)) {   //如果文件存在加载并投递数据
        m_option_out.TransferData(Image.FromFile(m_str_file));
    }
}

上面代码片段为DEMO中STNodeImageInput重载 因为保存时候 需要把已经打开的文件路劲一起保存 还原的时候再次打开文件并传递数据

OnGotFocusOnLostFocusOnMouse***OnKey***OnMove

若无特殊需求 仅仅需要的是输入输出点就足够了 那么无需用户进行重绘操作 上图 "Demo_Node" 就是默认的绘制 用户只需要在节点中加入需要的输入输出选项即可

protected override void OnCreate() {
    base.OnCreate();
    this.InputOptions.Add(new STNodeOption("Input", typeof(string), false));
    this.InputOptions.Add(new STNodeOption("SingleNode", typeof(Image), true));
    this.InputOptions.Add(new STNodeOption("SingleNode", typeof(Icon), true));

    this.OutputOptions.Add(new STNodeOption("output", typeof(string), false));
    this.OutputOptions.Add(new STNodeOption("Single", typeof(string), true));
    this.Title = "Demo_Node";
}

上面代码片段为 "Demo_Node" 的OnCreate重载 加入了三个输入节点和两个输出节点 (当然上面的代码并没有绑定STNodeOption的事件) 若需要自定义绘制参考Demo代码

STNodeOption

STNodeOption为STNode下选项的连接点

TransferData(object data)是关键函数 当被调用时数据将自动传递到与它相连的所有选项中 并触发目标选项的DataTransfer事件
此函数是节点选项之间数据传递的核心

上述中不带 "设置" 二字的都为只读属性 即便是继承至STNodeOption
因为作者认为STNodeOption最大的用途应该是作为节点之间连线的载体和事件的触发 而对于其他外观需求并不是很重要

• DotColor
  • 若设置此值 则绘制时候以此值为准 否则查询STNodeEditor.TypeColor字段进行颜色匹配
• DataType
  • 此选项允许被连接或者输出的数据类型 若类型无法被兼容 无法完成连线
    对于输入类型的节点 每个与其参与连接的输出节点的数据类型必须与输入节点的数据类型相同 或者为输入节点数据类型的子类
    在使用过程中作者并不建议子类和父类混合使用 对于输入或者输出的数据类型应当统一为子类或者父类 若混合使用将在一定程度上产生歧义 比如父类颜色被设定成红色子类颜色被设定成黄色 那么在UI上会给人一种无法被连接的错觉 应当统一数据类型所对应的颜色
    当数据类型为object时 则表示可兼容所有数据类型且以 空心 状态绘制
    
    上图中的 "HUB" 节点为内置节点 其节点类型为STNodeHub默认状态下其输入输出点都为object类型 表示可兼容所有类型 且重载了ConnectOption(STNodeOption op)与CanConnect(STNodeOption op)函数 一旦被接入或者被接入时则会变更为和对应的数据类型进行连接 若连接成功另则会再增加一行类型为object的新行
    但是决定输入类型的DataType属性被internal修饰 所以若你即使继承至STNodeOption也无法改写 只能通过构造器传递 因为处于连线状态突然变更类型会带来一系列的问题 即便编辑器发现变更时候可以选择自动断开所有不相符的连接 但是作者并不建议或者打算这么做 若有此需求请更改源代码

OnConnectedOnConnectingOnDisConnectedOnDisConnectingOnDataTransfer

当Connected与DisConnected触发的同时DataTransfer也会触发
所以通常情况下DataTransfer事件足够使用 通过对事件参数Status可得到 当前事件触发时候目标Option与当前Option的连线关系

当一个连线完成或者断开时候 输入和输出STNodeOption都将触发事件 因为无论连接还是断开都应该是相对的需要两个节点共同参与 而通常情况下只需要对输入节点进行事件绑定即可

STNodeOptionEventArgs

STNodeOptionEventArgs为包含了STNodeOption相关事件的事件参数

STNodeControl

关于此类不做过多介绍 可将其视为System.Windows.Forms.Control虽然提供的属性和事件并没有太多 但是作者认为也应当足够了 若还有其他需求请自行修改源代码

public class STNodeButton : STNodeControl   //自定义一个Button控件
{
    private bool m_isHover;

    protected override void OnMouseEnter(EventArgs e) {
        base.OnMouseEnter(e);
        m_isHover = true;
        this.Invalidate();
    }

    protected override void OnMouseLeave(EventArgs e) {
        base.OnMouseLeave(e);
        m_isHover = false;
        this.Invalidate();
    }

    protected override void OnPaint(DrawingTools dt) {
        //base.OnPaint(dt);
        Graphics g = dt.Graphics;
        SolidBrush brush = dt.SolidBrush;
        brush.Color = m_isHover ? Color.DodgerBlue : this.BackColor;
        g.FillRectangle(brush, 0, 0, this.Width, this.Height);
        g.DrawString(this.Text, this.Font, Brushes.White, this.ClientRectangle, base.m_sf);
    }
}

public class STNodeImageInput : STNode
{
    private STNodeOption m_option_out;

    protected override void OnCreate() {
        base.OnCreate();
        this.Title = "ImageInput";
        m_option_out = new STNodeOption("", typeof(Image), false);
        this.OutputOptions.Add(m_option_out);
        STNodeButton btn = new STNodeButton();
        btn.Left = 10; btn.Top = 10;
        btn.Text = "OpenImage";
        btn.MouseClick += new MouseEventHandler(btn_MouseClick);
        this.Controls.Add(btn);
    }
    //...other code
}

上面代码片段为 DEMO 中 "ImageInput" 节点与自定义 Button 控件代码 以上代码演示了如何自定义与使用一个控件 可以看到与System.Windows.Forms.Control差异并不是很大 多以这里并不做过多介绍