javascript - 在鼠标光标位置添加 cytoscape 节点

Question

我想在鼠标箭头所在的位置，在 Canvas 上的点击事件上添加一个 cytoscape 节点。

我该怎么做？

我的方法:(效果不是很好)

我可以通过单击创建一个节点，但我无法确保创建的节点的位置在我单击的位置。使用这样的东西:

$("#cy").click(function(event){

    pos = getMousePosition(this, event)

    cy.add([
      { group: "nodes", data: { id: "testid" }, position: pos },
    ]);
});

我无法正确定义 getMousePosition()。无论 cytoscape Canvas 的位置如何，我应该如何定义此函数以使节点呈现在正确的位置？

Answer 1

鼠标使用屏幕上的渲染坐标。如果您想在特定渲染位置添加节点，最简单的方法是在渲染 坐标中指定新节点位置，例如:

cy.add([
  { group: "nodes", data: { id: "testid" }, renderedPosition: rpos } // , ...
]);

然后传递渲染的鼠标位置(相对于 cy.js div)变得微不足道，例如http://api.jquery.com/position/