Question

我正在与RaphaelJS一起开始绘画应用程序。什么是跟踪纸张（用鼠标）绘制的所有元素的最佳方法？

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

我检查了API，但没有发现我想要的东西......我运气不好吗？

Answer 1

我想这取决于你说“跟踪”的意思。

您可以使用Paper.forEach循环播放给定论文中的所有元素，并且您可以使用Paper.getById提取特定元素。

如果您使用Paper.path绘制元素，请使用this SO thread中描述的方法设置可以存储在单独数据结构中的ID。

Answer 2

我已经研究过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;

这样你就可以确定Element_3是指_drawingPanelStructure的第三个索引处的元素。

将绘图逻辑与数据结构分开，即填充数据结构，然后将数据结构传递给某个函数，然后在面板上完成所有绘图。

Answer 3

根据我的经验，最好的方法是创建专门的对象（让我们称之为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对象中，这样就很容易在事件处理程序中访问模型，等等。

主要优点是：

轻松访问任何元素。
轻松保存应用程序的状态 - 您只需要保存并加载模型
可扩展 - 模型可能包含您想要的任何值。

RaphaelJS - 获取所有元素

3 个答案: