Статьи

Добавление тени в пользовательское окно Chrome в AIR 2

Февраль 15, 2018

Я прочитал комментарий к моему решению, опубликованному в поваренной книге Adobe (как часть поваренной книги Flex 4 от O’Reilly ):

Добавление тени в пользовательское окно Chrome

Я обновил пример и протестировал его на Flash Builder 4 и AIR 2.0 SDK.

проблема

Вы хотите добавить тень на границу окна, к которому применен пользовательский хром.

Решение

Передайте экземпляр DropShadowFilter массиву фильтров экземпляра NativeWindow или установите стили dropShadowEnabled и dropShadowColor.

Детальное объяснение

Окно, к которому применен пользовательский хром, может иметь тень на своих границах. Это окно может быть вашим главным окном приложения или любым другим окном в приложении. Если вы хотите добавить тень вокруг основного окна приложения, обязательно установите прозрачность этого окна, используя systemChrome и прозрачные атрибуты в файле дескриптора приложения:

<SystemChrome> ни один </ systemChrome> 

<Прозрачный> True </ прозрачный>

Затем вы можете добавить тень к своему окну двумя способами. Первый способ — создать экземпляр объекта DropShadowFilter (подкласс класса BitmapFilter) и установить свойства, которые вы хотите использовать для тени. Каждый DisplayObject имеет свойство Array filters, в котором вы можете хранить экземпляры BitmapFilter, которые вы хотите использовать в этом DisplayObject. Для DropShadowFilter вы можете определить множество свойств, таких как цвет, альфа, blurX, blurY, расстояние и угол, чтобы настроить внешний вид вашей тени. В следующем примере показано базовое приложение AIR с примененным пользовательским Chrome (рисунок 20-1). На самом деле, Chrome состоит из трех компонентов Canvas из Flex Framework.

Тень настроена следующим образом:

shadowFilter = new DropShadowFilter();

shadowFilter.color = 0xFF0000;

shadowFilter.alpha = 0.75;

shadowFilter.blurX = 5;

shadowFilter.blurY = 5;

shadowFilter.distance = 5;

shadowFilter.angle = 90;

Чтобы отбросить тень на прозрачный фон окна, назначьте экземпляр shadowFilter массиву фильтров экземпляра WindowedApplication. В этом примере ключевое слово ссылается на экземпляр WindowedApplication:

this.filters = [shadowFilter];

Вот полный код MXML для примера:

<?xml version="1.0" encoding="utf-8"?> 

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 

         xmlns:s="library://ns.adobe.com/flex/spark" 

         xmlns:mx="library://ns.adobe.com/flex/mx" 

         applicationComplete="init()" 

         backgroundAlpha="0" 

         showStatusBar="false" 

         title="Main window"> 

   

  <s:layout> 

    

      <s:BasicLayout/> 

    

  </s:layout> 

   

  <fx:Declarations> 

    

      <!-- Place nonvisual elements (e.g., services, value objects) here --> 

    

  </fx:Declarations> 

   

  <fx:Style> 

  

      @namespace "library://ns.adobe.com/flex/spark"; 

    

      WindowedApplication { 

     

    padding-right:"5"; 

     

    padding-left:"5"; 

     

    padding-top:"5"; 

     

    padding-bottom:"5"; 

     

    show-flex-chrome:false; 

     

      } 

    

      BorderContainer.BgCanvas { 

     

    background-color:"0xE6E6E6"; 

     

    border-style:solid; 

     

    border-color:"0xFFFFFF"; 

     

    border-thickness:10; 

     

    corner-radius:20; 

  

     

      } 

    

  </fx:Style> 

   

   

  <fx:Script> 

  

      <![CDATA[ 

    import flash.display.NativeWindowSystemChrome; 

    import flash.filters.DropShadowFilter; 

    import flash.filters.BitmapFilterQuality; 

     

    private var shadowFilter:DropShadowFilter; 

     

    private function init() : void 

    { 

      

        stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown ); 

  

        var color:Number = 0x000000; 

        var angle:Number = 45; 

        var alpha:Number = 0.5; 

        var blurX:Number = 6; 

        var blurY:Number = 6; 

        var distance:Number = 10; 

        var strength:Number = 0.65; 

        var inner:Boolean = false; 

        var knockout:Boolean = false; 

        var quality:Number = BitmapFilterQuality.HIGH; 

      

        shadowFilter =  new DropShadowFilter(distance, 

      angle, 

      color, 

      alpha, 

      blurX, 

      blurY, 

      strength, 

      quality, 

      inner, 

      knockout); 

      

        applyShadow(this.bgWindow); 

      

    } 

     

    private function applyShadow(comp:DisplayObject):void 

    { 

        comp.filters = [this.shadowFilter]; 

    } 

     

    private function closeWindow( event : MouseEvent ) : void 

    { 

      

        this.nativeWindow.close(); 

      

    } 

     

    private function onMouseDown( event : MouseEvent ) : void 

    { 

      

        this.nativeWindow.startMove(); 

      

    } 

      ]]> 

    

  </fx:Script> 

   

  <s:BorderContainer styleName="BgCanvas" id="bgWindow" 

         right="20" 

         bottom="20" 

         top="20" 

         left="20"> 

    

      <s:HGroup y="0" 

       right="15" 

       left="5" 

       verticalAlign="middle" 

       direction="ltr" 

       width="100%"> 

     

    <mx:Spacer width="100%"/> 

     

    <mx:LinkButton label="close" 

          click="closeWindow(event)"/> 

     

      </s:HGroup> 

    

      <s:Label text="I can have a drop shadow " 

      horizontalCenter="0" 

      verticalCenter="0" 

      fontSize="12"/> 

    

  </s:BorderContainer> 

   

</s:WindowedApplication>

 

34
Share: