1

私はこのブログ投稿からJSfiddleをフォークしました（火曜日の夜の楽しみのために...） http://boundary.com/blog/2012/07/03/building-node-diagrams-in-html5/

new Node()そして、私が1つをダブルクリックするたびにリンクを作成しようとしています。私のフィドルはここにあります http://jsfiddle.net/joevallender/cGzCe/4/

私は最初はライブラリを台無しにしないように努めていましたが、フィドルには、dblclickイベントのサポートを追加した変更されたバージョンが（リソースに）含まれています。

とにかく、要点まで！イベントで実行する関数を渡しており、ダブルクリックすると機能しfirstNodeますが、新しく作成された各ノードにイベントを再度追加し続ける必要があります/何らかの方法で作成関数を参照すると、推測されますループに。

var create = function() {
  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 100,
    y: 100
  }).attach();
  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();
}
var firstNode = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 350,
    y: 50,
    events: {
        dblclick: create
    }
}).attach();

ダブルクリックイベントのプロトタイプ関数を変更することを検討する必要があるように感じますが、少し迷子になりました。誰かa）私が話していることを知っていますか？およびb）お手伝いできますか。クライアントの仕事などではありませんが、知りたいのですが！

重複をすばやくスキャンしましたが、質問のタイトルの言い回しが間違っていることからわかるように、検索の言い回しが完全にはわかりません。

4

2 に答える 2

1

これを実現する最も簡単な方法はdblclick、作成したノードにイベントを追加することです。これを自動的に行うためにNodeクラスを拡張できるはずですが、それが必要かどうかはわかりません。

var create = function() {

  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 100,
    y: 100,
    events:{ // add the event to the created node. 
      dblclick: create
    }
  }).attach();

  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();

  //nodes.push(node);
}

新しく作成されたノードを配置するために、それらが生成されたノードに相対的であることをお勧めします。

var create = function() {
  var ancestor = $(event.target); // get the element that was double clicked
  var top = ancestor.position().top;  // and its position
  var left = ancestor.position().left;

  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: left + 100,        //new position relative to the parent.
    y: top + 100,
    events:{
      dblclick: create
    }
  }).attach();

  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();

  //nodes.push(node);
}
于 2012-09-04T20:55:00.463 に答える
1

コードは正常に機能しますが、問題は、新しいノードを作成するためのxとyが100であるため、create関数で新しいノードが互いにオーバーラップしていることです。

そこで、math.randomを使用して、新しいノードに対してランダムなx、y位置を生成しました

これがデモです

必要に応じて、新しいノードの位置と名前をランダムに生成する必要があります

于 2012-09-04T21:06:55.663 に答える