在 flex 中动态地将子组件添加到 Canvas vs Group答案

【问题标题】：Dynamically adding child components to Canvas vs Group in flex在 flex 中动态地将子组件添加到 Canvas vs Group
【发布时间】：2011-08-05 08:58:25
【问题描述】：

我有一个自定义组件，我在其中做一些图形（例如画一条线）并动态地向它添加一个子组件（例如标签）。

如果我将组件基于组（根据文档推荐，因为它是 spark 组件），那么当我动态添加标签时，图形部分就会消失。

但是，如果我将其基于 Canvas，则不会发生这种情况。

为什么会这样？

这里是代码。

MyComponent.as

public class MyComponent extends Group
    {
        public var x1:int;
        public var y1:int;

        public function MyComponent()
        {
            super();

            addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void {
                x1 = mouseX;
                y1 = mouseY;
            });

            addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void {
                if (event.buttonDown) {
                    graphics.lineStyle(3, 0x000000);
                    graphics.moveTo(x1, y1)
                    graphics.lineTo(mouseX, mouseY);
                    x1 = mouseX;
                    y1 = mouseY;
                }
            });
        }

        public function addLabel():void
        {
            var label:Label = new Label();
            label.x = 100;
            label.y = 100;
            label.text = "new label ";
            addElement(label);  //change to addChild if using Canvas 
        }
    }

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:local="*">

    <s:Panel width="50%" height="50%" verticalCenter="0" horizontalCenter="0" title="Sample app">

        <MyComponent id="drawingArea" xmlns="*" width="100%" height="100%" />

        <s:controlBarContent>
            <s:Button label="Add label" click="drawingArea.addLabel()"/>
        </s:controlBarContent>
    </s:Panel>
</s:Application>

【问题讨论】：

我们需要查看代码来帮助您。
@Jonathan 刚刚添加了代码。谢谢

标签： apache-flex actionscript

【解决方案1】：

这可能会给你一些额外的见解：

http://www.billdwhite.com/wordpress/?p=296

【讨论】：

与其链接到答案，不如总结（或复制，如果源材料允许）与解决方案相关的关键点通常是一个更好的主意。 StackOverflow 旨在成为编程问题的一站式资源，要求用户离开站点才能访问解决方案无法实现这一目标。
感谢 TokenMacGuy！我会在这方面做得更好。 :)

【解决方案2】：

根据组件生命周期在 Flex 中的工作方式，这是“正常的”。当invalidateDisplayList 在您的函数中被调用时，它会重绘其中的所有内容并清除graphics。当您添加该标签时，它确实无效。

如果我是你，我会这样做：

public class MyComponent extends Group
{
    protected var _previousX:int;
    protected var _previousY:int;
    protected var _drawing:UIComponent;

    public function MyComponent()
    {
        super();
        this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
        this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    }

    public function addLabel():void
    {
        var label:Label = new Label();
        label.x = 100;
        label.y = 100;
        label.text = "new label ";
        addElement(label);
    }

    override protected function createChildren():void
    {
        super.createChildren();
        if(!this._drawing)
        {
            this._drawing = new UIComponent();
            this._drawing.percentWidth = 100;
            this._drawing.percentHeight = 100;
            this.addElement(this._drawing);
        }
    }

    protected function onMouseDown(e:MouseEvent):void
    {
        this._previousX = e.localX;
        this._previousY = e.localY;
        this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
    }

    protected function onMouseUp(e:MouseEvent):void
    {
        this.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
    }

    protected function onMouseDown(e:MouseEvent):void
    {
        this._drawing.graphics.lineStyle(3, 0x000000);
        this._drawing.graphics.moveTo(this._previousX, this._previousY);
        this._drawing.graphics.lineTo(e.localX, e.localY);
        this._previousX = e.localX;
        this._previousY = e.localY;
    }
}

这是未经测试的，但我想你明白了。您还应该阅读组件生命周期，并真正考虑通过尝试将其抽象为数据来完成哪些行为（例如，我不喜欢“addLabel”函数：P）。

【讨论】：