LayaAir学习之二：给显示对象设置遮罩----js方向

来源：互联网发布：nginx lua 连接redis 编辑：程序博客网时间：2024/06/10 03:48

根据官方技术文档写的一个设置遮罩demo。

创建空项目，并在bin目录下创建maskDemo.html，输入如下代码：

<!DOCTYPE html><html><head><meta charset='utf-8'/><title>www.layabox.com</title><meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/><meta name='apple-mobile-web-app-capable' content='yes' /><meta name='full-screen' content='true' /><meta name='screen-orientation' content='portrait' /><meta name='x5-fullscreen' content='true' /><meta name='360-fullscreen' content='true' /><meta http-equiv='expires' content='0' /></head><body>   <!--核心包，封装了显示对象渲染，事件，时间管理，时间轴动画，缓动，消息交互,socket，本地存储，鼠标触摸，声音，加载，颜色滤镜，位图字体等--><script type="text/javascript" src="libs/laya.core.js"></script><!--封装了webgl渲染管线，如果使用webgl渲染，可以在初始化时调用Laya.init(1000,800,laya.webgl.WebGL);-->    <script type="text/javascript" src="libs/laya.webgl.js"></script><script>    var Sprite=Laya.Sprite;    var Loader=Laya.Loader;    function onLoaded(){        //不带遮罩的显示对象        var sprite0=new Sprite();        sprite0.graphics.drawTexture(Loader.getRes("comp/image.png"));        sprite0.pos(100, 100);        Laya.stage.addChild(sprite0);        //带遮罩的显示对象        var sprite1=new Sprite();        sprite1.graphics.drawTexture(Loader.getRes("comp/image.png"));        sprite1.pos(300, 100);        //创建遮罩对象        var mask = new Sprite();        //画一个圆形的遮罩区域        mask.graphics.drawCircle(0,0,80,"#f00");        mask.pos(80,80);        sprite1.mask=mask;        Laya.stage.addChild(sprite1);    }    function init(){        //创建舞台，默认背景色是黑色的        Laya.init(600, 400, Laya.WebGL);        Laya.stage.bgColor="#ccc";        Laya.loader.load(            [{                url: 'res/atlas/comp.json',                type: Loader.ATLAS             }],            Laya.Handler.create(this, onLoaded)        );    }    init();        </script></body></html>

一开始我以为json文件是随便给出的，我就在项目里头新建了个demo.json，然后将资源地址直接指向laya/assets/comp目录下的图片资源，然后直接点击调试。结果发现控制台直接报错，提示找不到文件，但是我直接复制又能打开。

就不晓得是什么错误，然后在网友的指导下发现官方给出示例是对的，只不过我们需要在调试之前做如下操作：

切换到设计模式点击导航“导出----清理并导出”操作，这个会将laya下的ui素材资源导出到bin目录下。

最后，重新点击调试即可，最终演示如下：

0 0