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

我不清楚如何使用jQuery's position函数来获取鼠标坐标，正如@maxfranz建议的那样。

我使用的代码是：

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

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

3 个答案: