vue 流程设计器_winform实现流程图设计器

1.要实现的主界面效果：

2.左边是一个ListView(listView1)，右边的画布是一个Panel(panel1)。

主要思路介绍如下：

1)允许拖放，listView1和panel1设置其AllowDrop=true;

2)非连接线类型的图形拖放处理：左边的listView1的项目被选中后，可以获取其图形类型(是路由器、是服务器还是云等)，并在全局变量中记录下当前的操作对象类型，然后拖放到panel1后，panel1获得对应的图形类型，首先判断图的类型是否为非连接线，如果是则获取对应的图片，用g.DrawImage将其绘制到画布中，图片的坐标参考自当前鼠标(拖放到panel1最后松开鼠标左键时的坐标)的坐标。

3)连接线类型的图形处理：如果是连接线，应该要有两个点来确定一条直线。当选中listView1的连接线时，会在全局变量中记录下当前的操作对象类型是连接线，当在panel1上单击时，首选判断当前的操作对象类型的全局对象是否为连接线，如果是，则记录第一次单击的点，然后等待记录单击的第二个点，当第二次单击完成后，调用绘制直线的方法在画布中进行绘制直线。

4)当线和图形绑定后，拖放图形时，直线附属在图形的那个点会随着图形位置的变化而变化，当最后定位后，panel1会重绘网格和流程图。

5)编辑图形信息：在panel1上双击时，程序获取双击的坐标点离所有的图形区域中最近的图形，然后计算距离，看是否满足设置的阈值，如果小于阈值，则认为是在该图形上双击，是要进行编辑操作。

下面给出绘制网格的代码：

3.在panel1上进行鼠标单击的处理程序：

4.连接线方向判断代码：

5.给出重绘的程序宽和高代码：

6.Nobj==50为当前画布最大的对象个数代码：

【IT科技之家-itkeji综合 -文章版权声明】

非特殊说明，本文版权归 [ IT科技之家-itkeji综合 ] 所有，转载请注明出处.

更多文章请关注：itkeji综合