zoukankan      html  css  js  c++  java
  • 利用threshold实现的遮罩引导

    点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。facebook也有类似的引导,方法也很简单:用4个绝对定位的DIV(指定一个背景 + 一定透明度)遮住其它部分,这样可以被操作的区域就“留空”出来。

    用flash实现上面的效果(比如在一个网页游戏中,使用此方法引导新手操作游戏),用BitmapData类的threshold方法是比较容易做到上面这个效果的。

    threshold共有8个参数,其中前5个参数为必须要传入的。

    threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint, color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false):uint

    利用InteractivePNG可“穿透”点击的特性,构建一个指定区域布满整个舞台大小的白色非透明的Bitmap,在另外一个层,创建一个指定大小、位置的“引导框”(注意要设置为透明),然后使用前面创建的Bitmap与“引导框”进行色值比较,符合要求的就使用另外一种颜色填充(使用透明进行填充,例如:0x00FFFFFF),这样满足条件的“引导框”位置的地方就被“透明”了。

    示例的核心的代码:

    package
    {
    import com.mosesSupposes.bitmap.InteractivePNG;

    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.geom.ColorTransform;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;

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

    public class AppGuideMaskUIComponent extends UIComponent
    {

    private var line_UI:UIComponent;
    private var ui:InteractivePNG;
    private var temp_movie:Sprite;
    private var fade:Fade;

    public function AppGuideMaskUIComponent()
    {
    super();

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

    ui = new InteractivePNG();
    ui.alpha = 0.6;
    ui.mouseChildren = false;
    addChild(ui);

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

    temp_movie = new Sprite();
    temp_movie.mouseChildren = false;
    temp_movie.mouseEnabled = false;
    addChild(temp_movie);

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

    /**
    * 初始化引导框
    *
    * @param x
    * @param y
    * @param w
    * @param h
    *
    */
    public function initView(x:Number, y:Number, w:Number, h:Number):void
    {
    clear();

    createMask(x, y, w, h);

    inverseMask();

    ui.drawBitmapHitArea();
    ui.enableInteractivePNG();

    startFade();
    }

    private function createMask(x:Number, y:Number, w:Number, h:Number):void
    {
    var _x:Number = x;
    var _y:Number = y;
    var _w:Number = w;
    var _h:Number = h;

    var sprite:Sprite = new Sprite();
    sprite.x = _x;
    sprite.y = _y;
    sprite.graphics.beginFill(0xFFFFFF, 1);
    sprite.graphics.drawRect(0, 0, _w, _h);

    temp_movie.addChild(sprite);

    //勾勒红色提示框
    line_UI.graphics.clear();
    line_UI.graphics.lineStyle(3, 0xFF0000, 1);
    line_UI.graphics.moveTo(_x, _y);
    line_UI.graphics.lineTo(_x + _w, _y);
    line_UI.graphics.lineTo(_x + _w, _y + _h);
    line_UI.graphics.lineTo(_x, _y + _h);
    line_UI.graphics.lineTo(_x, _y);
    }

    /**
    * 创建遮罩
    *
    */
    private function inverseMask():void
    {
    var _w:Number = Application.application.width;
    var _h:Number = Application.application.height;

    var _bmp:BitmapData = new BitmapData(_w, _h, true, 0xFFFFFFFF);

    var transform:ColorTransform = new ColorTransform(0, 0, 0, 1);
    var matrix:Matrix = new Matrix();
    matrix.translate(temp_movie.x, temp_movie.y);

    _bmp.draw(temp_movie, matrix, transform);
    //使用白色进行检测,色值小于白色色值的将被设置为透明 http://www.liuhuan.com/blog/article.asp?id=1081
    _bmp.threshold(_bmp, new Rectangle(0, 0, _bmp.width, _bmp.height), new Point(0, 0), "<", 0xFFFFFFFF, 0x00FFFFFF);

    clear();

    var tempBmp:Bitmap = new Bitmap(_bmp);
    ui.addChild(tempBmp);
    }

    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
    {
    while (temp_movie.numChildren)
    {
    temp_movie.removeChildAt(0);
    }

    while (ui.numChildren)
    {
    ui.removeChildAt(0);
    }

    stopFade();
    }
    }
    }

     

    下载本示例的完整代码>>
  • 相关阅读:
    MVVM 中 ViewModelBase和 CommandBase
    Numpy的ndarry
    dockerfile命令
    Docker命令大全
    Docker介绍
    Docker安装
    pandas入门学习
    pandas入门学习--------------------------(一)
    python签名设计
    python--numpy学习(一)
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2185506.html
Copyright © 2011-2022 走看看