Adding drawing objects to a collection in Flex 4

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.

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.