html - 在 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 个用于连接器。

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

以及一种设置水平连接器宽度的方法。

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