Flex: как сделать makebar?

Question

Я хочу настроить пользовательский скин на моем progressBar, но он не работает так, как я этого хочу. Моя кожа имеет 3 разных цвета (зеленый, желтый, красный), а зеленый цвет должен показывать до 50%, тогда я хочу, чтобы желтый цвет появился после зеленого, а красный - на 90% после зеленого и желтого. Так что на 100% они должны все показать.

Проблема заключается в том, что ProgressBar устанавливает только ширину моей кожи, чтобы все цвета отображались в любое время. Но если я использую неопределенный Скин, но не устанавливаю неопределенное значение true, которое не происходит.

Как я могу сделать кожу, которая не просто меняет ширину? Atm Я просто использую MovieClip для кожи.

Answer 1

Я делал это в прошлом с помощью программных скинов. Вам необходимо создать свои собственные версии ProgressBarSkin и ProgressBarMaskSkin и, возможно, ProgressBarTrackSkin. В вашем ProgressBarSkin, вы можете переопределить метод updateDisplayList следующим образом:

override protected function updateDisplayList(w:Number, h:Number):void { 
     super.updateDisplayList(w, h); 
     graphics.clear(); 

     var fullWidth:int = w; 
     if (parent != null && (parent as UIComponent).mask != null) 
      fullWidth = (parent as UIComponent).mask.width; 

     var matrix:Matrix = new Matrix(); 
     matrix.createGradientBox(fullWidth, h); 
     var colors:Array = [0xd00000, 0xf0d000, 0x00ff00]; 

     this.graphics.lineStyle(); 
     this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1], [0,128,255], matrix); 
     this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4); 
    } 

И в вашем ProgressBarMaskSkin сделать это:

override protected function updateDisplayList(w:Number, h:Number):void { 
     super.updateDisplayList(w, h); 
     graphics.clear(); 

     this.drawRoundRect(2, 2, w - 4, h - 4, (h - 4)/2, 0xffffff, 1); 
    } 

Затем вы назначаете классы кожи на ваш прогресс бар и вы установлены. Надеюсь, это поможет.