从 canvas 中删除随机拉斐尔元素

Question

我正在使用 raphaeljs 和 socketIO 进行实时数据展示。我的 canvas 上有代表节点的圆圈，它们作为 nodeStatus[id].obj 存储在 nodeStatus 对象中，其中 "id" 可以是“101”、“102”等，我我正在尝试实现一个功能，以从客户端浏览器的 canvas.

中随机删除先前绘制的圆（节点）

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

这是我客户端的相关部分 html。（nodeID 是我要删除的圆（节点）的 id（来自我的 canvas/paper），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 is undefined" 错误。

console.log(nodeID); 打印预期值，如“101”、“102”等，而 nodeStatus[102].obj.remove(); 从 canvas 中删除 "raphael object with id=101"。但是 nodeStatus[nodeID].obj.remove(); 不能正常工作。有人可以指出我哪里做错了吗？

Answer 1

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].obj 或 nodeStatus[nodeID].idText 未定义。

从 canvas 中删除随机拉斐尔元素

Removing random raphael elements from canvas

html

javascript

raphael

socket.io