LayaAir UI 组件 # Image 位图、Label 标签

向右看齐 2022-04-02 18:22 557阅读 0赞

**目录**

Image 组件

编码示例

Label 组件

编码示例

渲染优化

--------------------

# Image 组件 #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class Image</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>Image <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227153633656">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227153633656">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227153633656">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227153633656">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227153633656"> Object</td> 
  </tr> 
 </tbody> 
</table>

1、[laya.ui.Image][] 类是用于表示位图图像或绘制图形的显示对象。

2、Image 和 Clip 组件是唯一支持异步加载的两个组件，比如 img.skin = "abc/xxx.png"，其他 UI 组件均不支持异步加载。

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property（属性）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#height" rel="nofollow">height</a> : Number&nbsp; ，[override] 表示显示对象的高度，以像素为单位。 注：当值为0时，高度为自适应大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#sizeGrid" rel="nofollow">sizeGrid</a> : String ，当前实例的位图 AutoImage 实例的有效缩放网格数据。 数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。 例如："4,4,4,4,1"。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#skin" rel="nofollow">skin</a> : String&nbsp; ，对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#source" rel="nofollow">source</a> : Texture&nbsp; ，对象的纹理资源。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#width" rel="nofollow">width</a> : Number&nbsp; ，[override] 表示显示对象的宽度，以像素为单位。 注：当值为0时，宽度为自适应大小。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#Image%28%29" rel="nofollow">Image</a>(skin:String = null)&nbsp; &nbsp;，创建一个 Image 实例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Image#dispose%28%29" rel="nofollow">dispose</a>():void&nbsp; ，销毁对象并释放加载的皮肤资源。</p> </td> 
  </tr> 
 </tbody> 
</table>

更多 API 见官网：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Image][laya.ui.Image]

## 编码示例 ##

![20181227152611437.gif][]

1、系统默认提供了两张 Image 组件，对于图片资源实际开发中通常都是用自己美工做的多一些。

![20181227153613346.gif][]

官网案例：[https://ldc.layabox.com/doc/?nav=zh-js-2-3-5][https_ldc.layabox.com_doc_nav_zh-js-2-3-5]

# Label 组件 #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class Label</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>Label <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227155302217">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227155302217">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227155302217">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227155302217">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181227155302217"> Object</td> 
  </tr> 
  <tr> 
   <td><strong>子类</strong></td> 
   <td>TextInput</td> 
  </tr> 
 </tbody> 
</table>

1、Label 类用于创建显示对象以显示文本，文字可以是系统字体或者 BMFont 字体。

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property（属性）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#align" rel="nofollow">align</a> : String&nbsp; ，表示文本的水平显示方式。 取值： "left"： 居左对齐显示。 "center"： 居中对齐显示。 "right"： 居右对齐显示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#bgColor" rel="nofollow">bgColor</a> : String&nbsp; ，文本背景颜色，以字符串表示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#bold" rel="nofollow">bold</a> : Boolean&nbsp; ，指定文本是否为粗体字。 默认值为 false，这意味着不使用粗体字。如果值为 true，则文本为粗体字。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#borderColor" rel="nofollow">borderColor</a> : String ，文本边框背景颜色，以字符串表示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#color" rel="nofollow">color</a> : String ，表示文本的颜色值。可以通过 Text.defaultColor 设置默认颜色。 默认值为黑色。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#font" rel="nofollow">font</a> : String <p>文本的字体名称，以字符串形式表示。 默认值为："Arial"，可以通过Font.defaultFont设置默认字体。 如果运行时系统找不到设定的字体，则用系统默认的字体渲染文字，从而导致显示异常。(通常电脑上显示正常，在一些移动端因缺少设置的字体而显示异常)。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#fontSize" rel="nofollow">fontSize</a> : int&nbsp; ，指定文本的字体大小（以像素为单位）。 默认为20像素，可以通过 Text.defaultSize 设置默认大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#height" rel="nofollow">height</a> : Number&nbsp; ，[override] 表示显示对象的高度，以像素为单位。 注：当值为0时，高度为自适应大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#italic" rel="nofollow">italic</a> : Boolean&nbsp; ，表示使用此文本格式的文本是否为斜体。 默认值为 false，这意味着不使用斜体。如果值为 true，则文本为斜体。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#leading" rel="nofollow">leading</a> : Number&nbsp; ，垂直行间距（以像素为单位）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#overflow" rel="nofollow">overflow</a> : String&nbsp; ，overflow 指定文本超出文本域后的行为。其值为"hidden"、"visible"和"scroll"之一。 性能从高到低依次为：hidden &gt; visible &gt; scroll。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#padding" rel="nofollow">padding</a> : String&nbsp; ，边距信息 "上边距，右边距，下边距 , 左边距（边距以像素为单位）"</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#stroke" rel="nofollow">stroke</a> : Number&nbsp; ，描边宽度（以像素为单位）。 默认值0，表示不描边。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#strokeColor" rel="nofollow">strokeColor</a> : String ，描边颜色，以字符串表示。 默认值为 "#000000"（黑色）;</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#text" rel="nofollow">text</a> : String ，当前文本内容字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#underline" rel="nofollow">underline</a> : Boolean ，是否显示下划线。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#underlineColor" rel="nofollow">underlineColor</a> : String，下划线颜色</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#valign" rel="nofollow">valign</a> : String ，表示文本的垂直显示方式。 取值： "top"： 居顶部对齐显示。 "middle"： 居中对齐显示。 "bottom"： 居底部对齐显示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#width" rel="nofollow">width</a> : Number ，[override] 表示显示对象的宽度，以像素为单位。 注：当值为0时，宽度为自适应大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#wordWrap" rel="nofollow">wordWrap</a> : Boolean ，表示文本是否自动换行，默认为false。 若值为true，则自动换行；否则不自动换行。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#Label%28%29" rel="nofollow">Label</a>(text:String) ，创建一个新的 Label 实例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#changeText%28%29" rel="nofollow">changeText</a>(text:String):void</p> <p>快速更改显示文本。不进行排版计算，效率较高。 如果只更改文字内容，不更改文字样式，建议使用此接口，能提高效率。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Label#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
  </tr> 
 </tbody> 
</table>

更多 API 可以参考官网：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Label][https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Label]

## 编码示例 ##

![20181227163847390.gif][]

官网示例：[https://ldc.layabox.com/doc/?nav=zh-js-2-3-6][https_ldc.layabox.com_doc_nav_zh-js-2-3-6]

## 渲染优化 ##

在运行时，设置了描边的文本比没有描边的文本多调用一次绘图指令，此时文本对CPU的使用量和文本的数量成正比，因此尽量使用替代方案来完成同样的需求。

> 1）对于几乎不变动的文本内容，可以使用cacheAs降低性能消耗，参见“图形渲染性能 - 关于cacheAs”。
> 
> 2）对于内容经常变动，但是使用的字符数量较少的文本域，可以选择使用位图字体。

**跳过文本排版，直接渲染：**

1、大多数情况下，很多文本都不需要复杂的排版，仅仅简单地显示一行字，为了迎合这一需求，[Text][]、[Label ][Label]都提供的名为changeText 的方法可以直接跳过排版。

2、changeText 会直接修改绘图指令中该文本绘制的最后一条指令，这种前面的绘图指令依旧存在的行为会导致 changeText 只使用于以下情况：

> · 文本始终只有一行。
> 
> · 文本的样式始终不变（颜色、粗细、斜体、对齐等等）。

![20190112145742673.gif][]

实现代码如下：

class MyText {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
            this.data = [];
            this.data.push("有一美人兮，见之不忘。 ");
            this.data.push("一日不见兮，思之如狂。 ");
            this.data.push("凤飞翱翔兮，四海求凰。 ");
            this.data.push("无奈佳人兮，不在东墙。 ");
            this.data.push("将琴代语兮，聊写衷肠。 ");
            this.data.push("何日见许兮，慰我彷徨。 ");
    
            this.index = 0;//标识当前 Label 显示的 data数组中的元素索引，默认从0开始
            this.createLabel();
            Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.buttonControl));
        }
        /**创建标签 */
        createLabel() {
            this.label = new Laya.Label(this.data[0]);
            this.label.fontSize = 25;
            this.label.color = "#fff";
            this.label.pos(300, 20);
            Laya.stage.addChild(this.label);
        }
        //按钮控制————创建按钮，按钮绑定单击事件
        buttonControl() {
            var btn_pre = this.createButton("上一句");
            var btn_next = this.createButton("下一句");
            btn_pre.pos(250, 100);
            btn_next.pos(500, 100);
    
            /**下一句按钮绑定单击事件 */
            btn_next.on(Laya.Event.CLICK, this, function () {
                if (++this.index >= 6) {
                    this.index = 0;
                }
                /**
                 * changeText：快速更改显示文本
                 * 注意必须是文本始终只有一行，文本的样式始终不变（颜色、粗细、斜体、对齐等等）
                 */
                this.label.changeText(this.data[this.index]);
                // console.log("next", this.index, this.data.length);
            });
            /**上一句按钮绑定单击事件 */
            btn_pre.on(Laya.Event.CLICK, this, function () {
                if (--this.index <= -1) {
                    this.index = this.data.length - 1;
                }
                this.label.changeText(this.data[this.index]);
                // console.log("pre", this.index, this.data.length);
            });
        }
        /**创建按钮 */
        createButton(label) {
            var btn = new Laya.Button("comp/button.png", label);
            btn.labelSize = 20;
            btn.size(120, 30);
            Laya.stage.addChild(btn);
            return btn;
        }
    }
    new MyText();//运行本类

[laya.ui.Image]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Image
[20181227152611437.gif]: /images/20220402/b7d07df4a87145c695afb1b9608712e3.png
[20181227153613346.gif]: /images/20220402/3c98d8fee5214a0c8ec5bc5245a4bf87.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-5]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-5
[https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Label]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Label
[20181227163847390.gif]: /images/20220402/50336629fea044a99b7561213960a228.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-6]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-6
[Text]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Text#changeText%28%29
[Label]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Label#changeText%28%29
[20190112145742673.gif]: /images/20220402/9e797f8638ad4c929d38622ab8bc2531.png