javascript - 从 Canvas 上删除随机拉斐尔元素

我正在与raphaeljs和socketIO进行实时数据演示。我的画布上有代表节点的圆圈，它们以nodeStatus的形式存储在nodeStatus[id].obj对象中，其中“ id”可以是“ 101”，“ 102”等，我正在尝试实现随机删除功能客户端浏览器画布中先前绘制的圆圈（节点）。

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

这是我的客户端html中的相关部分。 （nodeID是我要从画布/纸上删除的circle（节点）的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的拉斐尔对象”。但是nodeStatus[nodeID].obj.remove();不能正常工作。有人可以指出我做错了什么吗？

最佳答案

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。

关于javascript - 从 Canvas 上删除随机拉斐尔元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30976509/