Question

我想使用HTML5 with Grid Layout

创建流程图

详细信息： - 必须能够将5个元素拖到工作表中（事件，条件，操作，数据，结束） - 元素可以相互连接（从元素到元素的拖动线） - Condition元素具有true / false连接符 - 元素必须对齐网格 - 必须可以调整元素大小并为其命名 - 应该像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表示连接器。

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

用于设置水平连接器宽度的方法。

如果顺利，那么你也可以添加对角连接器，如果您愿意，可以从西北到东南，从东北到西南。

在HTML5中创建流程图

2 个答案: