引导遮罩

来源：互联网发布：科比公司知乎编辑：程序博客网时间：2024/04/29 08:33

package
{
import flash.display.Sprite;
import flash.geom.Rectangle;

import mx.core.UIComponent;
import mx.effects.Fade;

public class GuideMask extends UIComponent
{

  private var maskSp:Sprite;
  private var line_UI:UIComponent;
  private var fade:Fade;

  public function GuideMask()
  {
   super();

   this.mouseEnabled = false;
   this.mouseChildren = true;

   maskSp = new Sprite;
   addChild(maskSp);



   line_UI = new UIComponent();
   line_UI.mouseChildren = false;
   line_UI.mouseEnabled = false;
   addChild(line_UI);


   //动画闪烁
   fade = new Fade();
   fade.target = line_UI;
   fade.duration = 1000;
   fade.repeatCount = 0;
  }

  /**
   * 初始化引导框
   *
   * @param x
   * @param y
   * @param w
   * @param h
   *
   */
  public function initView(rec:Rectangle,rec2:Rectangle=null,showTip:Boolean=true,showMask:Boolean=true):void
  {
   visible = true;
   stopFade();
   maskSp.visible = true;
   line_UI.visible = true;

   createMaskNew(rec,rec2,showTip,showMask);
   startFade();
  }

  private function createMaskNew(rec:Rectangle,rec2:Rectangle,showTip:Boolean=true,showMask:Boolean=true):void
  {
   maskSp.graphics.clear();
   line_UI.graphics.clear();



   if(showMask){
    //从beginFill开始填充颜色，封闭路径内不填充所以得到一个中间镂空的遮罩层
    maskSp.graphics.lineStyle( 0 );
    maskSp.graphics.beginFill( 0x000000 , 0.4 ); //背景颜色和透明度

    maskSp.graphics.drawRect( 0 , 0 ,4000,2000);   //以舞台宽高画背景
    maskSp.graphics.lineStyle( 2 , 0x000000 ,0); //画一个镂空的框
    maskSp.graphics.drawRect( rec.x , rec.y , rec.width , rec.height ); //在200，200处画一个框
    if(rec2){
     maskSp.graphics.drawRect( rec2.x , rec2.y , rec2.width , rec2.height );
    }
    maskSp.graphics.endFill(); //结束填充
   }

   if(showTip){
    //勾勒红色提示框
    line_UI.graphics.lineStyle(2, 0xFF0000, 1);
    line_UI.graphics.moveTo(rec.x, rec.y);
    line_UI.graphics.lineTo(rec.x + rec.width, rec.y);
    line_UI.graphics.lineTo(rec.x + rec.width, rec.y + rec.height);
    line_UI.graphics.lineTo(rec.x, rec.y + rec.height);
    line_UI.graphics.lineTo(rec.x, rec.y);

    if(rec2){
     line_UI.graphics.moveTo(rec2.x, rec2.y);
     line_UI.graphics.lineTo(rec2.x + rec2.width, rec2.y);
     line_UI.graphics.lineTo(rec2.x + rec2.width, rec2.y + rec2.height);
     line_UI.graphics.lineTo(rec2.x, rec2.y + rec2.height);
     line_UI.graphics.lineTo(rec2.x, rec2.y);
    }
   }
  }
  public function startFade():void
  {
   line_UI.alpha = 1;
   fade.stop();
   fade.play(null, true);
  }

  public function stopFade():void
  {
   line_UI.alpha = 0;
   fade.stop();
  }

  public function clear():void
  {
   if(maskSp){
    maskSp.visible = false;
   }
   if(line_UI){
    line_UI.visible = false;
   }
  }
}
}

var guide:GuideMaskComp=new GuideMaskComp
    this.addChild(guide)
    var re:Rectangle=new Rectangle(300,300,100,100)
    guide.initView(re,null,true,true)

0 0