Динамическое добавление дочерних компонентов в Canvas vs Group в flex

Question

У меня есть пользовательский компонент, в котором я делаю графику (например, рисую линию) и динамически добавляю к ней подкомпонент (например, метку).

Если я основываю компонент вне группы (что рекомендуется в соответствии с документами, поскольку он является искровым компонентом), то при динамическом добавлении метки графическая часть исчезает.

Однако, если я ее основываюХолст этого не происходит.

Почему это так?

Вот код.

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>

Answer 1

Это «нормально», как работает жизненный цикл компонента во 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).

Answer 2

Это может дать вам дополнительное понимание:

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