Dynamisches hinzufügen von untergeordneten Komponenten auf Leinwand vs Gruppe in flex

Habe ich eine benutzerdefinierte Komponente, wo ich einige Grafiken (. e.g zeichnen Sie eine Linie) und Sie dynamisch hinzufügen eine Unterkomponente (e.g-label) zu.

Wenn ich die Komponente aus Gruppe (das wird empfohlen, da pro docs seit der spark-Komponente) wenn ich dann dynamisch die Beschriftung der Grafik-Teil verschwindet.

Aber wenn ich Basis es off-Canvas-Bereich, ist dies nicht möglich.

Warum ist das der Fall?

Hier ist der code.

MyComponent.als

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>
  • Wir müssen sehen, den code, um Ihnen zu helfen.
  • einfach den code Hinzugefügt. Dank
InformationsquelleAutor | 2011-08-04
  1. 0

    Dies könnte Ihnen einige weitere Erkenntnis:

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

    • Statt der Verlinkung auf die Antwort, ist es normalerweise eine bessere Idee zu fassen (oder zu reproduzieren, wenn das Ausgangsmaterial erlauben würde) die wichtigsten Punkte, die sich auf die Lösung. StackOverflow ist gedacht, um eine one-stop Ressource für Fragen zur Programmierung, dass die Benutzer die Website verlassen, um auf die Lösung fehlschlägt, um diesem Ziel zu entsprechen.
    • Dank TokenMacGuy! Ich werde besser nach vorne geht. 🙂
    • Sie Bearbeiten diese Antwort so, dass es nicht
    InformationsquelleAutor benjaminbytheway
  2. 0

    Dass ist 'normal', als je, wie die Komponente lifecycle arbeitet in Flex. Wenn ein invalidateDisplayList wird aufgerufen, in Ihrer Funktion, es zieht alles ein und es löscht die graphics. Wenn Sie hinzufügen, dass das label es nicht entkräften.

    Wenn ich du wäre, würde ich etwas wie das hier tun:

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

    Dies ist ungetestet, aber ich denke, Sie bekommen die Idee. Sollten Sie auch Lesen, auf Bauteil-Lebenszyklen und wirklich denken, was das Verhalten, das Sie versuchen zu erreichen, indem Sie versuchen, zu abstrahieren, es als Daten (ich bin kein fan von der "addLabel" - Funktion für die Instanz :P).

    InformationsquelleAutor J_A_X
Schreibe einen Kommentar