在HTML5中创建流程图

Question

我想使用带网格布局的HTML5创建流程图

详细信息：-必须能够将5个元素拖动到工作表(事件、条件、操作、数据、结束)-元素可以相互连接(在元素之间拖动线)-条件元素有真/假连接符-元素必须捕捉到网格-必须能够调整元素大小并为其命名-应该像MS Visio一样工作(易于学习)

我能得到如上所述的一步一步的程序吗？

现在我可以拖动对象了。

现在，下一步是连接这两个对象

它类似于图表布局。

如何在悬停时显示每个对象的连接器？

Answer 1

要通过将线从一个对象拖到另一个对象来连接两个对象，请尝试执行以下操作。

var X,Y,temp=0;//Global Varaibles

canvas.addEventListener('mousedown',function(evt){

X = evt.clientX;
Y = evt.clientY;
temp = 1;
},false);

canvas.addeventListener('mouseup',function(evt){
temp=0;
},false);

canvas.addEventListener('mousemove',function(evt){
if(temp == 1)
{
context.clearRect(0,0,canvas.width,canvas.height);
//re draw all the objects
context.beginPath();
context.strokeStyle = '#000000';
context.moveTo(X,Y);
context.lineTo(evt.clientX,evt.clientY);
context.stroke();
context.closePath();
}
},false);

查看小提琴中的演示：Jsfiddle Demo

Answer 2

您让用户将5个元素拖到面板/画布上的方式，与允许用户将连接器拖到面板/画布上的方式相同。

显而易见的选择是，一个垂直连接器和一个水平连接器，总共有7个元素。5个用于基本对象，2个用于连接器。

您可能还需要一种允许用户设置垂直连接器的连接器高度的方法。

以及用于设置水平连接件的宽度的装置。

如果一切顺利，那么您也可以添加对角线连接器，从西北到东南，从东北到西南，如果您选择这样做。