自定義Flex / ActionScript UIComponent可以在調整大小時多次繪制

Question

我創建了一個自定義uicomponent，每當調整瀏覽器或其特定容器的大小時，就會發生重新繪制，但是該組件的內容一次又一次地繪制出來...因此，如果我移動容器，我將得到多個圓圈相互重疊繪制，但根據重繪發生時容器所在的位置而偏移。 我的updateDisplayList代碼如下。 我是否需要做一些清除操作，以免像這樣連續復制？？？ 非常感謝您的幫助！

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

        }

Answer 1

閱讀有關Flex組件生命周期的信息 。 許多事情可能會執行invalidateDisplayList（），從而導致updateDisplayList在下一個呈現事件期間重新執行。

我在這里看到的問題是您每次都在創建新的baseCircle，outerCircle和innerCircle。 相反，您應該創建每個實例之一，並在運行updateDisplayList（）時對其進行更新。

我可能會在當前組件上創建您的innerCircle，outerCircle和baseCircle變量的實例。 在createChildren（）中，您可以將它們作為子項添加到組件上。 在updateDisplayList中，您可以進行相關繪圖。