0

HTML5とグリッドレイアウトを使用してフローチャートを作成したい

詳細情報：-5つの要素をシートにドラッグできる必要があります（イベント、条件、アクション、データ、終了）-要素は相互に接続できます（要素から要素に線をドラッグします）-条件要素にはtrue/falseコネクタがあります-要素グリッドにスナップする必要があります-要素のサイズを変更して名前を付けることができる必要があります-MSVisioのように機能する必要があります（習得が容易）

上記のようなステップバイステップの手順を取得できますか？

現在、オブジェクトをドラッグできます。

次のステップは、2つのオブジェクトを接続することです

これは、ダイアグラムのレイアウトに似ています。

ホバーしたときに各オブジェクトのコネクタを表示するにはどうすればよいですか？

4

2 に答える 2

1

あるオブジェクトから別のオブジェクトに線をドラッグして 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

于 2013-03-19T09:10:22.867 に答える
0

ユーザーが 5 つの要素をパネル/キャンバスにドラッグできるようにする方法と同じ方法で、ユーザーがコネクタをパネル/キャンバスにドラッグできるようにする必要があります。

明らかな選択肢は、1 つの垂直コネクタと 1 つの水平コネクタで、合計で最大 7 つの要素になります。5 つは基本オブジェクト用、2 つはコネクタ用です。

ユーザーが垂直コネクタのコネクタの高さを設定できるようにする手段も必要になる場合があります。

また、水平コネクタの幅を設定する手段。

それがうまくいけば、必要に応じて、北西から南東、北東から南西に対角線のコネクタを追加することもできます。

于 2013-03-19T07:12:07.250 に答える