Home > FLEX > Flex i automatycznie skalowane Canvas

Flex i automatycznie skalowane Canvas

W technologii Adobe Flex jest coś takiego jak płótno – Canvas. Jeżeli na tym płótnie położymy zbyt wiele obiektów, to Flex automatycznie narysuje suwaki (ScrollBar). Ja zamiast suwaków wolę skalować. To znaczy, gdy położę na płótnie jakieś elementy które z niego wystają to Flex skaluje zawartość zamiast rysować suwaki. Zrobiłem to dość prosto.

package eu.jakubiak.ui
{
  import mx.containers.Canvas;
  import mx.core.ScrollPolicy;

  public class ScaledCanvas extends Canvas
  {
    public function ScaledCanvas()
    {
      super();
      horizontalScrollPolicy = ScrollPolicy.OFF;
      verticalScrollPolicy = ScrollPolicy.OFF;
    }
    
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
      super.updateDisplayList(unscaledWidth,unscaledHeight);
      var mx:Number = measuredWidth / scaleX;
      var my:Number = measuredHeight / scaleY;
      if(width < mx || height < my) {
        var sx:Number = width / mx;
        var sy:Number = height / my;
        if(Math.max(Math.abs(sy - scaleY),Math.abs(sx - scaleX))>0.01) {
          var s:Number = Math.min( sx, sy );
          this.scaleX = s;
          this.scaleY = s;
        } 
      } else if ( width > mx && height > my && ( scaleX != 1 || scaleY != 1 ) ) {
        scaleX = 1;
        scaleY = 1;
      }
    }
  }
}

Jest to użyteczne, gdy na przykład mamy koszyk z elementami przeciąganymi techniką drag&drop. Gdy włożymy do koszyka za dużo elementów to koszyk się pomniejsza zamiast rysować suwaki.

Categories: FLEX Tags:
  1. No comments yet.
  1. No trackbacks yet.

Subscribe without commenting