从画布中删除随机raphael元素

时间:2015-06-22 09:33:02

标签: javascript html socket.io raphael

我正在使用raphaeljs和socketIO进行实时数据显示。我的圆圈代表画布上的节点,它们存储在nodeStatus对象中nodeStatus[id].obj,其中“id”可以是“101”,“102”等等,我正在尝试实现一个用于从客户端浏览器的画布中随机删除先前绘制的圆圈(节点)。

服务器端脚本,用于发送nodeID& obj就是这样:socket.emit("randomNode",randomNode,nodes[randomNode]);。 randomNode包含我要删除的圆的ID。 nodes [randomNode]是在该节点上存储信息的对象。

这是我的客户端html中的相关部分。 (nodeID是我要删除的圆(节点)的id(从我的画布/纸上),obj是相应的对象)

socket.on("randomNode",function (nodeID, obj){
    nodes[nodeID] = obj;
    console.log(nodeID,obj);
    updateNodeStatus(nodeID);
    console.log(nodeStatus[nodeID]);
    nodeStatus[nodeID].obj.remove();
    nodeStatus[nodeID].idText.remove();
 });

nodeStatus[nodeID].obj.remove();生成“TypeError:nodeStatus [id] .obj未定义”错误。

console.log(nodeID);打印预期值,如“101”,“102”等,而nodeStatus[102].obj.remove();从画布中删除“id = 101的raphael对象”。但是nodeStatus[nodeID].obj.remove();不能正常工作。有人能指出我做错了吗?

1 个答案:

答案 0 :(得分:0)

socket.on("randomNode",function (nodeID, obj){
    nodeStatus[nodeID].obj.remove();
    nodeStatus[nodeID].idText.remove();    
    nodes[nodeID] = obj;
    console.log(nodeID,obj);
    updateNodeStatus(nodeID);
    console.log(nodeStatus[nodeID]);
 });

事实证明,必须首先删除raphael对象(保存在nodeStatus obj中)。 updateNodeStatus(nodeID)仅更新某个节点(id = nodeID的节点)上的信息,因此nodeStatus[nodeID].objnodeStatus[nodeID].idText未定义。