Arbor js - 当您将鼠标移动到节点上时,如何将节点ID显示为文本

时间:2013-11-05 14:41:48

标签: javascript jquery canvas arbor.js

“我对Javascript和Arbor很陌生,并且在绘制完整的节点图方面遇到了一些困难。我想通过展示我的代码来启动我的问题:

 var handler = {
            clicked:function(e){
                var pos = $(canvas).offset();
                _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
                selected = nearest = dragged = particleSystem.nearest(_mouseP);
                if (dragged.node !== null) dragged.node.fixed = true
                $(canvas).bind('mousemove', handler.dragged)
                $(window).bind('mouseup', handler.dropped)
                $(canvas).bind('mouseup', handler.newFunction)
            },
            newFunction:function(e){
                if (dragged===null || dragged.node===undefined) return
                if (dragged.node !== null){
                    dragged.node.fixed = false                  
                    var id=dragged.node.name;
                    //alert('Node selected: ' + id);
                }            
                return false
            },  
    }

我已经在画布上创建了一个节点。我的问题是:一旦我将鼠标移到节点上,我怎么能显示节点ID,或者任何信息显示为文本?我只想在将鼠标移到该节点上时显示文本。非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

也许你可以添加一个mousemove监听器,然后你可以在你的回调函数中测试鼠标是否超过一个节点。

    moved:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        nearestNode = particleSystem.nearest(_mouseP);

        if (!nearestNode.node) return false

        boxTuple = nodeBoxes[nearestNode.node.name];

        //judge whether mouse is on the node or not
        if(isInRectangle(boxTuple,_mouseP))
        {
                            var id = nearestNode.node.name;
            alert("Node selected:" + id);
        }
        return false
      },

     //add a mousemove listener 
    $(canvas).mousemove(handler.moved);

希望它有所帮助!