CODEWITHSUNDEEP
apache-flexactionscript-3actionscriptflex3flex4
fortpointuiguy
fortpointuiguy

Reputation: 137

Custom Flex/ActionScript UIComponent Keeps Getting Painted Multiple Times During a Resize

I've created a custom uicomponent and whenever the browser or its specific container is resized, a repaint occurs but the contents of the component get drawn again and again and again... So, if I move the container I'll end up with multiple circles drawn on top of each other but offset depending upon where the container is when the repaint occurs. My updateDisplayList code is below. Do I need to do some sort of clear so that it doesn't contiuously getting duplicated like this??? Thanks so much for any help!

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

            super.updateDisplayList(unscaledWidth, unscaledHeight);                             

            trace("height: " + parent.height);
            trace("width: " + parent.width);

            if (parent.height <= parent.width) {
                radius = Math.round((parent.height*.95)/2);
            }
            else {
                radius = Math.round((parent.width*.95)/2);
            }

            trace("radius: " + radius);

            outterRadius = Math.round(radius*.70);
            innerRadius = Math.round(radius*.30);

            trace("outterradius: " + outterRadius); 
            trace("innerradius: " + innerRadius);

            centerX = this.width/2;
            centerY = this.height/2;

            trace("centerX: " + centerX);
            trace("centerY: " + centerY);

            var innerCircle:Sprite = new Sprite();
            var outterCircle:Sprite = new Sprite();
            var baseCircle:Sprite = new Sprite();

            baseCircle.graphics.beginFill(0x000000);
            baseCircle.graphics.drawCircle(centerX, centerY, radius);               

            outterCircle.graphics.lineStyle(2, 0xA10303, .75);
            outterCircle.graphics.drawCircle(centerX, centerY, outterRadius);


            innerCircle.graphics.lineStyle(2, 0xA10303, .75);
            innerCircle.graphics.drawCircle(centerX, centerY, innerRadius);

            addChild(baseCircle);   
            addChild(outterCircle);
            addChild(innerCircle);

            for (var bubbleCount:int=0; bubbleCount < bubbleList.length; bubbleCount++) {
                var globalPoint:Point = this.localToGlobal(getPointInCircle(radius));
                var radarBubble:RadarBubble = bubbleList.getItemAt(bubbleCount) as RadarBubble;
                var bubbleLocalPoint:Point = radarBubble.globalToLocal(globalPoint);
                radarBubble.x = bubbleLocalPoint.x;
                radarBubble.y = bubbleLocalPoint.y;
                trace("Add bubble: " + radarBubble.x + ", " + radarBubble.y + ", " + radarBubble.radius);
                addChild(radarBubble);                                      
            }                           

            // create radar display lines to be animated
            for (var angleCount:int=0; angleCount < 360; angleCount++) {
                var tmpLine3:Sprite = new Sprite();
                tmpLine3.graphics.lineStyle(2, 0xA10303, 1);
                tmpLine3.graphics.moveTo(centerX, centerY);                                         
                tmpLine3.graphics.lineTo(getEndpoint(angleCount).x, getEndpoint(angleCount).y);
                tmpLine3.visible = false;
                addChild(tmpLine3);
                lineCollection.addItemAt(tmpLine3, angleCount);                             
            }

        }

Upvotes: 0

Views: 681

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

Read up on the Flex component lifecycle. A lot of things may execute invalidateDisplayList() thereby causing updateDisplayList to be re-execute during the next render event.

The problem I see here is that you are creating new baseCircle, outerCircle, and innerCircle each time. Rather, you should be creating one of each instance and updating it when updateDisplayList() runs.

I'd probably make your instances of innerCircle, outerCircle, and baseCircle variables on the current component. In createChildren() you can add them as children on the component. In updateDisplayList you can do the relevant drawing.

Upvotes: 1

Related Questions