通过mx.skins.ProgrammaticSkin,实现自定义组件（实现自定义组件的重复使用）

最新推荐文章于 2021-05-14 12:15:13 发布

原创最新推荐文章于 2021-05-14 12:15:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#distance #function #application #knockout #import #encoding

Flex实例专栏收录该内容

3 篇文章

订阅专栏

mx.skins.ProgrammaticSkin该类是外观元素的基类，它们通过编程方式来绘制自身。

下面通过实现自定义ToolTip来讲解这个类。

ToolTipBorderSkin ，这个方法就是实现自身的绘制.

package skins
{
import flash.display.Graphics;
import flash.geom.Point;

import mx.skins.ProgrammaticSkin;
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.DropShadowFilter;

public class ToolTipBorderSkin extends ProgrammaticSkin
{
  public function ToolTipBorderSkin()
  {
   super();
  }

   override protected function updateDisplayList(unscaledWidth:Number,
       unscaledHeight:Number):void{
       trace("w=" + unscaledWidth);
       trace("h=" + unscaledHeight);
       var g:Graphics = graphics;
       g.clear();
       //g.lineStyle(0,0xFF0000);
       g.beginFill(0xFF0000,0.5);
       //g.drawRect(0,0,unscaledWidth,unscaledHeight);
       g.drawRoundRect(0,0,unscaledWidth,unscaledHeight,15,10);
       g.endFill();
       var _w:Number = unscaledWidth;
       var _h:Number = unscaledHeight;
       var point1:Point = new Point(_w/3,_h);
       var point2:Point = new Point(2*_w/3,_h);
       var point3:Point = new Point(0,2*_h);
       g.beginFill(0xFF0000,0.5);
       g.moveTo(point1.x,point1.y);
       g.lineTo(point3.x,point3.y);
       g.lineTo(point2.x,point2.y);
       g.endFill();

       this.filters = [getDropShadowFilter()];
       }

       //添加阴影
       private function getDropShadowFilter():BitmapFilter{
    var color:Number = 0x000000;
             var angle:Number = 45;
             var alpha:Number = 0.8;
             var blurX:Number = 8;
             var blurY:Number = 8;
             var distance:Number = 15;
             var strength:Number = 0.65;
             var inner:Boolean = false;
             var knockout:Boolean = false;
             var quality:Number = BitmapFilterQuality.HIGH;

       return new DropShadowFilter(distance,
              angle,
              color,
              alpha,
              blurX,
              blurY,
              strength,
              quality);
   }
}
}

我们在下面的自定义样式里可以调用上面的方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

  <mx:Style>

   ToolTip
   {
    borderStyle:inset;
    color:#FFFFFF;
    borderSkin: ClassReference("skins.ToolTipBorderSkin");
   }
  </mx:Style>

  <mx:Script>
   <![CDATA[
    import mx.events.ToolTipEvent;
    import mx.managers.ToolTipManager;

    private function initApp():void{
     b5.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, moveToolTip);
    }
    private function moveToolTip(event:ToolTipEvent):void{
     trace(event);
     event.toolTip.x = b5.x + 5;
     event.toolTip.y = b5.y -35;
    }

   ]]>
  </mx:Script>
    <mx:Button id="b5" width="30" toolTip="this is good!" height="20" x="226" y="167"/>

</mx:Application>