Adding drawing objects to a collection in Flex 4 - apache-flex

Question

I'm trying to make annotations on an image.
I want to store all these annotations into a collection so that I can later remove or edit particular note(annotation).
I'm creating a UIComponent instance for example markUp and doing
markUp.graphics.lineStyle(2, drawColor);
markUp.graphics.moveTo(x1, y1);
markUp.graphics.lineTo(x2, y2);
I want to create a UIComponent instance every time whenever user makes a new annotation on my image.
How to generate dynamic instance and how to save them to a collection. Any help is appreciated.

Answer 1

From what I understand after a chat with Kishor:
Users may mark specific areas by mouse drag and add a comment accordingly. Markup and comment are stored in the database.
There is only one image enlarged at a time, and this image should display all markups. Clicking on a markup will raise a popup showing the associated comment.
Apparently drawing the markup is rather expensive, so once drawn a particular markup should be reused when the user switchs between images. The question is now:
How to reuse markups displayed on an image?
Answer:
Use an Object or Dictionary where you create one entry per image and the entry points to an Array of markups. You may create a convenient class to encapsulate the functionality of this map:
package {
import flash.display.DisplayObject;
public class Markups {
private var _map : Object;
public function Markups() {
_map = new Object();
}
public function addMarkup(imageId : String, markup : DisplayObject) : void {
if (!_map[imageId]) _map[imageId] = new Array();
(_map[imageId] as Array).push(markup);
}
public function hasMarkups(imageId : String) : Boolean {
return _map[imageId] !== undefined;
}
public function getMarkups(imageId : String) : Array {
return _map[imageId];
}
public function removeMarkup(imageId : String, markup : DisplayObject) : void {
var markups : Array = _map[imageId];
var index : int = markups.indexOf(markup);
markups.splice(index, 1);
if (!markups.length) delete _map[imageId];
}
}
}
Store this map at a place that is accessible from your image container.
var markupsPerImage : Markups = new Markups();
Add or remove a markup like this:
markupsPerImage.addMarkup(myImage.id, markupView);
markupsPerImage.removeMarkup(myImage.id, markupView);
Whenever the user changes the current image you 1. cleanup all markups of the last and 2. add all markups stored in the map.
In the image container:
public function setImage(myImage : MyImage) : void {
// remove markups
while (markupContainer.numChildren) {
markupContainer.removeChildAt(0);
}
// add markups
var markups : Array = markupsPerImage.getMarkups(myImage.id);
var markup : MarkupView;
foreach (markups as markup) {
markupContainer.addChild(markup);
}
}
Notes:
The example code assumes you have a markup container that hosts all markups. This container should have a reference to the markup map.