0

Kinetic JS を使用して HTML5 Canvas で Use Case Creator を作成しようとしています。これまでのところ、接続したい 2 つの要素 (アクターとユース ケース) を右クリックして線を作成できます。

ただし、この線は、接続先の要素の 1 つをドラッグしても固定されたままです。どちらか一方がドラッグされても、常に 2 つの要素を結ぶ線が必要です。

言い換えれば、線が接続されている要素が線へのアンカーとして機能するようにしたいのです。

これを理解しようとしましたが、実装できませんでした。

4

1 に答える 1

2

アクターまたはユースケースをドラッグするときに接続線を再配置することで、アクターとユースケースを接続したままにすることができます。

3 つのキネティック ノードまたはグループがあるとします。

  1. アクターノード、
  2. ユースケース ノード、
  3. それらをつなぐ専用のキネティックライン。

アクターとユースケースのドラッグムーブ イベント ハンドラーをセットアップします。 

// when the actor is dragged, reposition the connecting line

actor.on('dragmove', function () {
    connectThem(actor,useCase,connectingLine);
});

// when the useCase is dragged, reposition the connecting line

useCase.on('dragmove', function () {
    connectThem(actor,useCase,connectingLine);
});

dragmove ハンドラーで、アクターと useCase の位置を取得し、接続線を再配置します。

// reposition the line to connect the actor & useCase

function connectThem(actor,useCase,connectingLine){

    // get the XY of the actor+useCase to connect
    var x1 = actor.getX();
    var y1 = actor.getY();
    var x2 = useCase.getX();
    var y2 = useCase.getY();

    // reposition the connecting line
    connectingLine.setPoints([x1,y1,x2,y2]);

    // send the connecting line to the back
    connectingLine.setZIndex(0);

    // redraw the layer
    layer.draw();
};
于 2013-04-28T17:16:07.157 に答える