在 Flex 4 中将绘图对象添加到集合中

Question

我正在尝试在图像上进行注释。
我想将所有这些注释存储到一个集合中，以便以后可以删除或编辑特定注释（注释）。

我正在创建一个 UIComponent 实例，例如 markUp，并且

 markUp.graphics.lineStyle(2, drawColor);
 markUp.graphics.moveTo(x1, y1);
 markUp.graphics.lineTo(x2, y2);

每次用户在我的图像上进行新注释时我都想创建一个 UIComponent 实例。

如何生成动态实例以及如何将它们保存到集合中。任何帮助表示赞赏。

Answer 1

根据我与 Kishor 聊天后的了解：

用户可以通过鼠标拖动来标记特定区域并相应地添加评论。标记和注释存储在数据库中。

一次只能放大一张图像，并且该图像应显示所有标记。单击标记将弹出一个弹出窗口，显示相关的评论。

显然，绘制标记相当昂贵，因此一旦绘制了特定标记，当用户在图像之间切换时就应该重复使用。现在的问题是：

如何重用图像上显示的标记？

答案：

使用 对象 或 字典，为每个图像创建一个条目，并且该条目指向标记的Array。您可以创建一个方便的类来封装此地图的功能：

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];
        }
    }
}

将此地图存储在可从图像容器访问的位置。

var markupsPerImage : Markups = new Markups();

添加或删除这样的标记：

markupsPerImage.addMarkup(myImage.id, markupView);
markupsPerImage.removeMarkup(myImage.id, markupView);

每当用户更改当前图像时，您 1. 清除最后一个的所有标记，2. 添加存储在地图中的所有标记。

在图像容器中：

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

注意：

示例代码假设您有一个托管所有标记的标记容器。该容器应该具有对标记映射的引用。