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
看见屏幕右边的二维码了吗? 不想扫一扫看看吗