Question

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

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

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

每当用户在我的图像上创建一个新注释时，我想创建一个UIComponent实例。

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

Answer 1

根据与Kishor聊天后的理解：

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

一次只放大一张图像，此图像应显示所有标记。单击标记将弹出一个显示相关注释的弹出窗口。

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

如何重复使用图片上显示的标记？

答案：

使用Object或Dictionary为每个图片创建一个条目，并且条目指向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);

每当用户更改当前图像时，您将清除最后一个的所有标记，并添加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);
    }
}

注意：

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

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

1 个答案: