createjs 刮刮卡，刮开百分比。 含源文件

这篇没有废话

演示

 

代码预览：

var S = this;


var maskW = 600;//遮罩宽高
var maskH = 330;

var raduis=50;//擦除大小  半径

var percent=0.5 //当擦除超过 %比后  自动消除全部遮罩

var pt=S.parent.localToGlobal(S.x,S.y);//用于坐标转化，方便实际运用。比如被遮罩内容，处于多层mc内部，


//-----------

var dX, dY;//鼠标位置

S.on("mousedown", startDrawing);
S.on("pressmove", draw);
S.on("pressup", stopDrawing);


//刮刮卡涂层，   实际是放在被遮罩物体的上层，直接盖住下面内容，  并未使用  movieclip.mask=xxx
var overlay = new createjs.Shape();
overlay.graphics.f("#666");//这里可以使用bitmapfill 实现更丰富的样式效果
overlay.graphics.r(0, 0, maskW, maskH);
overlay.cache(0, 0, maskW,maskH);
S.addChild(overlay);



function startDrawing(e)
{
    dX = stage.mouseX-pt.x;
    dY = stage.mousey-pt.y;
    draw(e);
};

function draw(e)
{
    var cX=stage.mouseX-pt.x;
    var cY=stage.mouseY-pt.y;

    overlay.graphics.clear();//因为已经cache了， 所以这里clear，并不会被渲染出来。
    overlay.graphics.ss(raduis, 1).s("rgba(30,30,30,1)").mt(dX, dY).lt(cX, cY);//画线
    overlay.updateCache("destination-out");//叠加方式，可自行百度查询了解

    dX = cX;
    dY = cY;
};


function stopDrawing()
{    
    if(!createjs.BitmapData){alert("如果要检查刮开%比，需要引入BitmapData.js");return;}
    
    var ct=0;
    var bd=createjs.BitmapData.getBitmapData(overlay);
    
    var tl=bd._imageData.data.length;
    
    for(var i=0;i<tl;i+=10)//  隔10个点检查一次， 加快运算100倍
    {
        if(bd._imageData.data[i]==0)
        {
            ct++;
        }
    }
    //
    if(ct/(tl/10)>=percent)
    {
        //刮开了 （可自己添加消失效果） //这里还应该立即移除绑定的事件以免用户操作上出错
        createjs.Tween.get(overlay).to({alpha:0}, 300).call(function(){S.removeChild(overlay)})
    }
};

工程文件：

https://pan.baidu.com/s/1lGEV9MQrfZ9y20SVkNJVFQ 提取码: 6avb 

看见屏幕右边的二维码了吗？ 不想扫一扫看看吗