Question

如何获得tap活动位置？

在这里，我正在尝试在tap上添加一个节点...但我无法弄清楚如何将特定坐标传递给新节点的rendererPosition属性。

cy.on('tap', function (e) {
    if (e.cyTarget === cy) {                    
        //var pos = $(this).position().left,  //tried this, as jquery
        //posY = $(this).position().top;   //positioning without success        
        var idNum = cy.nodes().size();
        var setID = idNum.toString();
        cy.add([{
            group: "nodes",
            data: {
                id: "n" + setID
            },
            renderedPosition: {
                x: e.pageX, //- posX,
                y: e.pageY //- posY
            },
        }]);                        
    }    
});

使用相同的代码但与$('#cy').click功能绑定，它可以正常运行......但是使用cy.on('tap')方式，事件 e 没有pageX和pageY属性，我也无法使用$(this).position()函数获取元素位置。

我真的更喜欢使用tap，因为我正在尝试为移动界面开发我的应用程序。

提前致谢。

编辑：使用@darshanags观察和this link，我解决了这个问题：

var idNum = cy.nodes().size(),
    setID = idNum.toString(),
    offset = $("cy").offset(),
    position = {
        x: e.originalEvent.x - offset.left,
        y: e.originalEvent.y - offset.top
    };
cy.add([{
    group: "nodes",
    data: { id: "n" + setID },
    renderedPosition: {
        x: position.x,
        y: position.y
    },
    ...
}]);

Answer 1

您的使用不正确，Cytoscape的.position()与jQuery position()的工作方式略有不同：

获得职位并使用它：

var idNum = cy.nodes().size(),
    setID = idNum.toString(),
    position = {
        x: e.cyTarget.position("x"),
        y: e.cyTarget.position("y")
    };

cy.add([{
    group : "nodes",
    data : {
        id : "n" + setID
    },
    renderedPosition : {
        x : position.x,
        y : position.y
    }
}]);

文档：http://cytoscape.github.io/cytoscape.js/#collection/position--dimensions/node.position

Answer 2

我回答了elsewhere，但是在尝试使之工作时遇到了这两个问题，因此我也将其张贴在这里。

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

Cytoscape.js - 获取“.on（tap）”事件位置

2 个答案: