1

我从这篇博文中分出了一个 JSfiddle（只是为了在周二晚上玩......） http://boundary.com/blog/2012/07/03/building-node-diagrams-in-html5/

new Node()并且每次双击一个链接时都试图创建一个链接。我的小提琴在这里 http://jsfiddle.net/joevallender/cGzCe/4/

起初我试图不弄乱图书馆，但小提琴包括（在资源中）一个改变的版本，我在其中添加了对 dblclick 事件的支持。

总之，说到点子上了！我正在传递一个要在事件上运行的函数，它在双击时确实有效，firstNode但我需要继续将事件重新添加到每个新创建的节点/以某种方式引用 create 函数，这会猜到我们成一个循环。

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 以创建新节点。

所以我使用 math.random 为新节点生成随机 x,y 位置

这是演示

您应该根据需要随机生成新节点的位置和名称

于 2012-09-04T21:06:55.663 回答