Javascript RaphaelJS-获取所有元素

我正在开始拉斐尔的绘画申请。（用鼠标）跟踪在纸上绘制的所有元素的最佳方法是什么

我想到的第一种方法是将所有绘制的元素附加到一个数组中，但如果有RaphaelJS所拥有的“开箱即用”解决方案，这可能就没有那么有效了

---

我查了一下，但是没有找到我要找的东西。。。我运气不好吗？

我想这取决于你说的“跟踪”是什么意思

您可以使用循环指定纸张上的所有元素，也可以使用提取特定元素

---

如果使用绘制元素，请设置一个ID，使用中所述的方法将其存储在单独的数据结构中。

我在Raphael.js上做了一些工作，我发现最有效的方法是将绘制逻辑与数据结构分离。我不能在这里完整地编写代码（太长=（）），但可以让您了解如何使用代码片段，这可能会有所帮助

// Create Data Structure to keep seperate track of Elements and its attribute (assuming a Drawing Panel and only Line Type here)

    function DrawingPanelStructure(Type, Attributes){
     this.Type = Type;
     this.Attributes = Attributes;
    }

    function PanelLineAttribute(Color,CurveDataX, CurveDataY)
    {
    this.Color = Color; 
    this.CurveDataX = CurveDataX;   
    this.CurveDataY = CurveDataY;
    }

// Make Global Variables

    _drawingPanelStructure = new Object();
    var ElementDrawnNumber = 0; // Keeping Track of Number of elements drawn

// Then when Drawing the element, populate the Data Structure inside a function as

     _drawingPanelStructure[ElementDrawnNumber] = new DrawingPanelStructure("Line",new PanelLineAttribute("Red",[1,5,6,7,5], [5,1,8,6,8]));
    ElementDrawnNumber = ElementDrawnNumber + 1;

// Then you can call a function to draw the Element at specific index as    
    var XData = [];
    var YData =[];
    XData.push(_drawingPanelStructure[index].Attributes.CurveDataX);
    YData.push(_drawingPanelStructure[index].Attributes.CurveDataY);

     var LineChart = Paper.linechart(0, 0, DrawinPanelWidth, DrawingPanelHeight, 0),
           XData, YData, {}
             );

    // Since in this example there is only 1 line drawn on LineChart I'll use LineChart.lines[0]
     LineChart.lines[0].attr({ "stroke": _drawingPanelStructure[index].Attributes.Color});

它还有助于在绘制元素时为元素指定一个唯一的id

ElementDrawn.id = "Element_" + ElementDrawnNumber;

这样，您就可以确定元素_3是指位于_drawingPanelStructure第三个索引处的元素

因此，将绘图逻辑与数据结构分离，即。

---

填充数据结构，然后将数据结构传递给某个函数，该函数将在面板上绘制所有图形。

根据我的经验，最有效的方法是创建专用对象（我们称之为DataManager），该对象将在数组中保存每个图形的模型（而不是实际的Rapahel对象）

这是经理存根：

function DataManager (){
    var self = this;
    self.DrawingsArray = [];
}

这是模型存根：

function DrawingModel (name,raphael){
    var self = this;
    self.ID = someObject.generateSomeID();
    self.Name = name;
    self.Rapahel = raphael;
}

考虑到这一点，我们可以创建模型，在将图形添加到工作区后，向其添加raphael对象的引用，给它一些名称或id，然后将其添加到DataManager的DrawingArray。当涉及id时，您还可以将其作为新属性添加到raphael对象，以便在事件处理程序中轻松访问模型，等等

主要优点是：

轻松访问任何元素

轻松保存应用程序的状态-您只需要保存和加载模型

可扩展-模型可能包含您想要的任何值

---

谢谢你的回答，我最终在我的应用程序中使用了Andre的答案，所以我没有机会尝试这个，但它看起来和听起来都不错！也谢谢你的回答，我想Raphael没有我想要的，所以实现一个单独的数据结构是最好的方法。幸运的是Andre的答案对于我的情况来说足够了，但是你的答案这个解决方案看起来是追踪拉斐尔元素的好方法！再次感谢！