Javascript 在鼠标光标位置添加cytoscape节点

我想在画布上单击事件的鼠标箭头位置添加一个cytoscape节点

我该怎么做

我的方法（效果不太好）

我可以在单击时创建节点，但无法确保所创建节点的位置位于我单击的位置。 使用类似这样的方法：

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

    pos = getMousePosition(this, event)

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

---

我无法正确定义

getMousePosition（）

。我应该如何定义此函数以在正确位置渲染节点，而不考虑cytoscape画布的位置？

鼠标在屏幕上使用渲染坐标。如果要在特定渲染位置添加节点，则最容易在渲染坐标中指定新节点位置，例如：

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

---

然后传递呈现的鼠标位置（相对于cy.js div）就变得很简单了，例如，

我不清楚如何使用函数来获得鼠标坐标，正如@maxfranz所建议的那样

我使用的代码是：

$("#cy").click(function(event) {
    var pos = {x: event.offsetX, y: event.offsetY};
    cy.add([
        { group: "nodes", data: { id: "testid" }, renderedPosition: pos },
    ]);
});

---

在cytoscape.js 3.2中，有以下方便功能：

cy.on("tap", function(e) {
    cy.add([{
        group: "nodes",
        id: "testid",
        renderedPosition: {
            x: e.renderedPosition.x,
            y: e.renderedPosition.y,
        },
    });
});

这最终相当于（假设您设置了

容器：$（“#cy container”）

）：

---

完美的工作方式。“renderedPosition”参数是关键。但我不明白“位置”参数当时在做什么？当您设置节点的渲染位置时，其模型位置是否也会自动设置/更新？无论以何种方式设置位置，一切都是一致的。否则就会有矛盾

cy.on("tap", function(e) {
    let canvas = $("#cy-container").find("canvas").get(0);
    cy.add([{
        group: "nodes",
        id: "testid",
        renderedPosition: {
            x: e.originalEvent.pageX - $(canvas).offset().left,
            y: e.originalEvent.pageY - $(canvas).offset().top,
        },
    });
});