自定义 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中可以进行相关的绘制。