創建HTML5

Question

流程圖我想創建使用HTML5與網格佈局

詳細信息的流程圖： - 必須能夠拖動5個元素到片材（事件，條件，動作，數據，結束） - 元素可以連接到海誓山盟（從單元到單元拖線） - Condition元素有一個真/假連接器 - 元素必須齊格 - 必須能夠調整的元素，給他們一個名字 - 應工作像MS Visio（易於學習）

我可以得到一步一步的過程像上面提到的。

目前我可以拖動對象。

現在下一步我想這兩個對象

它類似於diagramo佈局連接。

如何在我懸停時顯示每個對象的連接器？

Answer 1

您可以讓用戶將5個元素拖動到面板/畫布上，這樣您應該讓用戶將連接器拖動到面板/畫布上。

明顯的選擇是，一個垂直連接器和一個水平連接器，總共可以達到7個元素。 5與您的基本對象和2爲您的連接器。

您可能還需要允許用戶設置垂直連接器的連接器高度。

並設置水平連接器寬度的方法。

如果這樣做順利的話，如果您選擇這樣做，您也可以添加對角連接器 ，從西北到東南和東北到西南。

Answer 2

要通過拖動線從一個對象到其他物體連接兩個物體試試這個..

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