C++ 流程图/GUI 设计器答案

【问题标题】：C++ Flowchart / GUI DesignerC++ 流程图/GUI 设计器
【发布时间】：2012-08-24 18:36:43
【问题描述】：

我需要编写一个 C++ GUI，以便用户可以通过从工具栏中选择几个块并将它们放入窗口中并按照他想要的顺序连接它们来制作 流程图/管道程序运行流程图。（为简单起见，只需考虑每个块的任务是打印一些数字。我的问题是 GUI）

有没有人尝试过类似的事情/任何经验？

是否可以在 WxWidget 或任何其他图形/窗口形式库中制作这样的 GUI？

是否可以使用VTK制作GUI？

你知道任何类似的开源工作吗？

【问题讨论】：

任何可以绘制形状和图形的框架都可以。
可以，VTK和wx可以一起使用。
@VZ：你知道有什么简单的例子可以给出一些基本的想法吗？
不是真的，但我似乎记得有人说sourceforge.net/projects/wxvtk 使用起来非常简单。

标签： c++ user-interface wxwidgets vtk flowchart

【解决方案1】：

我已经开发了几个带有 GUI 的应用程序来做这种事情。

我最满意的是 VASE：一种用于创建布局、设置参数和查看流程模拟器结果的 GUI。

这不是一项微不足道的任务，虽然一旦你完成了一两个，有很多想法可以重复使用，而且进展很快。

两个最大的挑战是绘制连接对象的线（如您所见，即使在 VASE 中，这个问题也没有完全解决），以及以易于恢复和重绘的格式存储该布局。

您有什么特殊问题需要帮助吗？

如果您想要一个非常非常简单的示例来帮助您入门，我已经重新实现了一些基本功能（一切都很好，干净，没有版权限制） - 左键单击选择，拖动移动，右键单击连接。

这里是源代码库 - http://66.199.140.183/cgi-bin/vase.cgi/home

这就是它的样子

我已经实现了一个简化的连接器，我称之为管道。为了让您了解如何做这些事情，这里是当用户右键单击时添加管道的代码

/**

  User has right clicked

  If he right clicks on a flower
  and there is a different flower selected
  then connect the selected flower to the right clicked flower

  if he right clicks on empty background
  create a new flower

*/
void cVase::MouseRightDown( wxMouseEvent& event )
{
    // find flower under click
    iterator iter_flower_clicked = find( event.GetPosition() );

    // check there was a flower under click
    if( iter_flower_clicked != end() ) {

        // check that we have a selected flower
        if( ! mySelected )
            return;
        // check that selected flower is different from one clicked
        if( mySelected == (*iter_flower_clicked) )
            return;
        // construct pipe from selected flower to clicked flower
        myPipe.push_back(cPipe( mySelected, *iter_flower_clicked ));

    } else {

        // no flower under click
        // make one appear!
        cFlower * pflower  = Add();
        pflower->setLocation( event.GetPosition() );
    }
    // redraw everything
    Refresh();
}

这是绘制管道的代码

/**

 Draw the pipe

 From starting flower's exit port to ending flower's entry port

*/
void cPipe::Paint( wxPaintDC& dc )
{
    dc.SetPen( *wxBLUE_PEN );
    dc.DrawLine( myStart->getExitPort(), myEnd->getEntryPort() );
}

您可以通过浏览源代码库来查看将所有这些联系在一起的 wxWidgets 代码的其余部分。

【讨论】：

我不知道，例如，我可以使用 WxWidget、GTK 或 VTK 来制作这样的 GUI。我需要看一个非常简单的程序示例来获得一些想法。
非常感谢，感谢您的帮助。只是一个问题，通过这种方式，是否可以在这些块之间建立连接，尤其是当我们有多端口时？既然你有经验，你觉得 wxart2d 怎么样？ wxart2d.org/moin
@Hesam 想知道您是否在关注我添加到 Vase GUI 框架中的增强功能？

【解决方案2】：

我认为使用 wxArt2D 之类的库比使用标准 wxWidgets drawing classes 更容易。 wxArt2D 的wires sample 看起来与您要查找的内容相似。

【讨论】：

谢谢，是的，这就是我想要的。我查看了 wxArt2D/wires，但似乎没有该库的教程或介绍文档。您是否尝试过使用 wsArt2D？

【解决方案3】：

也许您可以尝试使用名为 Flowchart to Code 的小工具，您可以获得所需的流程图，如下所示。可以在这里下载：http://www.athtek.com/flowchart-to-code.html#.Ug4z29JPTfI

【讨论】：