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

Question

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

我怎样才能做到这一点？

我的方法：（效果不太好）

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

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

    pos = getMousePosition(this, event)

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

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

Answer 1

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

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

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

Answer 2

在 cytoscape.js 3.2 中，有一些方便的函数：

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

这最终等同于（假设您已设置container: $("#cy-container")）：

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,
        },
    });
});

Answer 3

正如@maxfranz 所建议的那样，我不清楚如何使用jQuery 的功能来获取鼠标坐标。position

我使用的代码是：

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