RaphaelJS - Get All Items

Question

I am starting to paint with RaphaelJS. What is the best way to track all the elements that were drawn on paper (using the mouse)?

The first way I thought was to add all the drawn elements to the array, but this might not be as effective if there was a “out of the box” solution that RaphaelJS had.

I checked the API but did not find anything similar to what I was looking for ... am I lucky?

Answer 1

I think it depends on what you mean when you say "tracking."

You can loop all the elements on a given paper using Paper.forEach , and you can pull out certain elements using Paper.getById .

If you draw elements using Paper.path , set an identifier that can be stored in a separate data structure using the described method in this SO stream .

Answer 2

Well, I did a bit of work on Raphael.js, and the most efficient way I found was to separate the drawing logic from the data structure. I can't completely write the code here (too long = (), but it can give you some idea using code snippets that may be useful.

 // 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}); 

This is also useful in the sense that when drawing an element, you can give it a unique identifier.

 ElementDrawn.id = "Element_" + ElementDrawnNumber; 

This way you will be sure that Element_3 means the element in the third _drawingPanelStructure index.

Therefore, separate the drawing logic from the data structure, i.e. fill in the data structure, and then pass the data structure to some function, which then makes the entire drawing in the panel.

Answer 3

From my experience, the approach that works best is to create a specialized object (let's call it DataManager) that will contain the model of each drawing in the array (and not the actual Rapahel object)

here is the manager stub:

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

and here is the model stub:

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

With this in mind, we can create a model by adding a drawing to the workspace, add a link to the raphael object to it, give it some name or identifier, and then add it to the DataManager DrawingArray. When it comes to id, you can also add it as a new property to the Raphael object, so it's easy to access the model in event handlers, etc.

Main advantages:

• Easy access to any item.
• simple saving of application state - you only need to save and load models
• extensible - models can contain any values ​​you want.