zoukankan      html  css  js  c++  java
  • Layabox 常用操作

    文本类

     

    新建一个文本内容

     
    1. var wb =newLaya.Text();
    2. wb.text ="hello";
    3. wb.color ="#ffffff";// 文本颜色默认为黑色
    4. wb.align ="right";// align水平对齐方式
    5. wb.valign ="middle"//valign竖直对齐(top,bottom)
    6. wb.bgColor ="ff0000";
    7. wb.bold =true;// 加粗与否
    8. wb.borderColor ="#FF1493";//文本边框颜色
    9. wb.font ="Times New Roman";//字体
    10. wb.fontSize =10;//文字大小
    11. wb.height =20;//文字高度,像素单位
    12. wb.italic =false;//斜体与否
    13. wb.leading =5;//垂直行间距
    14. wb.overflow =Laya.Text.HIDDEN;//HIDDEN:不显示超出文本域的字符VISIBLE:不进行任何裁切
    15. //SCORLL:不显示文本域外的字符像素,并且支持scroll接口可以滚动显示
    16. Laya.stage.addChild(wb);
     

    textInput 输入

     
    1. classLayaSample{
    2. constructor(){
    3. //初始化引擎,不支持WebGL时自动切换到Canvas
    4. Laya.init(640,800,Laya.WebGL);
    5. //设置画布的背景颜色
    6. Laya.stage.bgColor ="#efefef";
    7. this.Text_InputSingleline();
    8. this.Text_InputMultiline();
    9. }
    10. privateText_InputSingleline():void{
    11. var textInput:Laya.TextInput=newLaya.TextInput("单行输入");//创建一个 TextInput 类的实例对象 textInput 。
    12. textInput.wordWrap =true;//设置 textInput 的文本自动换行。
    13. textInput.fontSize =30;//设置 textInput 的字体大小。
    14. textInput.x =0;//设置 textInput 对象的属性 x 的值,用于控制 textInput 对象的显示位置。
    15. textInput.y =0;//设置 textInput 对象的属性 y 的值,用于控制 textInput 对象的显示位置。
    16. textInput.width =300;//设置 textInput 的宽度。
    17. textInput.height =200;//设置 textInput 的高度。
    18. textInput.bgColor ="#c30c30";
    19. Laya.stage.addChild(textInput);//将 textInput 添加到显示列表。
    20. }
    21. privateText_InputMultiline():void{
    22. var textInput:Laya.TextInput=newLaya.TextInput("多行输入");//创建一个 TextInput 类的实例对象 textInput 。
    23. textInput.fontSize =30;//设置 textInput 的字体大小。
    24. textInput.wordWrap =true;//设置 textInput 的文本自动换行。
    25. textInput.multiline =true;//设置textInput的多行输入
    26. textInput.x =0;//设置 textInput 对象的属性 x 的值,用于控制 textInput 对象的显示位置。
    27. textInput.y =300//设置 textInput 对象的属性 y 的值,用于控制 textInput 对象的显示位置。
    28. textInput.width =300;//设置 textInput 的宽度。
    29. textInput.height =200;//设置 textInput 的高度。
    30. textInput.bgColor ="#c30c30";
    31. Laya.stage.addChild(textInput);//将 textInput 添加到显示列表。
    32. }
    33. }
    34. newLayaSample();
     

    图片类

     

    显示图片

    var img: Laya.Sprite = new Laya.Sprite();定义一个新图片

    img.loadImage("path",x,y,width,height,Handler=null)加载它

    注意载入位置的时候,默认的路径为bin目录

     
    1. classMain{
    2. constructor()
    3. {
    4. //初始化引擎
    5. Laya.init(1334,750);
    6. //设置舞台背景色
    7. Laya.stage.bgColor ="#ffffff";
    8. var img:Laya.Sprite=newLaya.Sprite();
    9. //加载显示图片,坐标位于100,50
    10. img.loadImage("res/img/monkey1.png",100,50);
    11. //添加到舞台
    12. Laya.stage.addChild(img);
    13. }
    14. }
    15. newMain();
     

    切换图片

    在显示图片的基础上,清空绘制,然后获得新的图片资源重新绘制

     
    1. // 程序入口
    2. classMain{
    3. //需要切换的图片资源路径
    4. private monkey1:string="res/img/monkey1.png";
    5. private monkey2:string="res/img/monkey2.png";
    6. //切换状态
    7. private flag:boolean=false;
    8. private img:Laya.Sprite;
    9. constructor()
    10. {
    11. //初始化引擎
    12. Laya.init(1334,750);
    13. //设置舞台背景色
    14. Laya.stage.bgColor ="#ffffff";
    15. this.img =newLaya.Sprite();
    16. //显示绘制的图片
    17. this.switchImg();
    18. //侦听switchImg中图片区域的点击事件,触发后执行switchImg切换图片
    19. this.img.on(Laya.Event.CLICK,this,this.switchImg);
    20. //将图片添加到舞台
    21. Laya.stage.addChild(this.img);
    22. }
    23. private switchImg():void{
    24. //清空图片
    25. this.img.graphics.clear();
    26. //获得要切换的图片资源路径
    27. var imgUrl:string=(this.flag =!this.flag)?this.monkey1:this.monkey2;
    28. //加载显示图片,坐标位于100,50
    29. this.img.loadImage(imgUrl,100,50);
    30. }
    31. }
    32. newMain();
  • 相关阅读:
    python爬虫笔记(3-1)re模块
    python爬虫笔记(2-2)xpath解析实例
    python爬虫笔记(2-1)Xpath解析
    python爬虫笔记(1-2)requests模块实例
    python爬虫笔记(1-1)requests模块:请求数据获取响应内容
    小程序上传图片,放大,删除。
    小程序中多个echarts折线图在同一个页面的使用
    vue传值 ---- >> 子传父,$emit()
    vue传值 ---- >> 父传子,props()
    离线webpack创建vue 项目
  • 原文地址:https://www.cnblogs.com/mrfri/p/8727163.html
Copyright © 2011-2022 走看看