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

Cytoscape.js - Get ".on(tap)" event position

本文关键字：tap 事件 位置 on js 获取 Cytoscape      更新时间：2023-09-26

如何获得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观察和此链接，我以这种方式解决了：

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

你的用法不正确，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

我在其他地方回答了这个问题，但在尝试完成这项工作时遇到了这两个问题，所以我也会在这里发布它。

在 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,
        },
    });
});
相关文章：