3

如何获得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没有pageXandpageY属性，我也不能使用$(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
    },
    ...
}]);
4

2 回答 2

3

您的使用不正确，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

于 2013-10-19T03:18:47.380 回答
1

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

在 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,
        },
    });
});
于 2018-11-15T22:54:56.483 回答