Laya编辑器二次开发（二）预览界面中添加图片尺寸信息展示

最新推荐文章于 2022-08-27 23:29:55 发布

一梦lpf

最新推荐文章于 2022-08-27 23:29:55 发布

阅读量538

点赞数 1

分类专栏： Laya编辑器二次开发文章标签： javascript html5 typescript 前端编辑器

本文链接：https://blog.csdn.net/lanuo/article/details/115480484

版权

3 篇文章 4 订阅

订阅专栏

Laya提供的预览界面可以展示选择目录下的资源文件。图片类型资源提供图片的的缩略图显示。在

这里我们想要让列表中的元素展示更多的信息，比如图片的尺寸信息。

接下来就来实现第一个二次开发的功能，预览界面列表元素信息扩展。

首先在layabuilder.max.js文件中搜索“预览”关键字，匹配项只有5个。通过简单的文字修改

测试，定位到预览界面关联的类为ResViewerPanel。

简单浏览一下该类，发现预览内容的容器为list组件，这样我们只要找到list的render类，就可以进行操作了。

（找render类可以直接去找类关联的界面描述文件，也可以通过在代码中断点的方式来查找。

查看及推断代码内容推荐使用断点的方式，过程中会顺便看到一些其他的内容，有助于更快的熟悉编辑器内容。）

在开发者工具中进入layabuilder.max.js类

在ResViewerPanel类中随便找一处可以获取到render类型的地方打个断点，来查看render具体是哪个类

通过查找，定位到render类为PrewViewItem

查看render类，发现其构成为image+label，这样我们只要在label.text中添加需要的尺寸信息就可以了。

通过查看PreViewItem代码，可以看出adptImg是一个异步方法，在该方法内可以拿到图片的原始尺寸信息，

我们在该方法中添加如下代码：

    //editor 增加图片尺寸信息显示///
    this.tLabel.text += "\n" + tt.width + "*" + tt.height;
    //

刷新编辑器发现文本没有显示出来，可以看出是render的尺寸过小，label不够显示两行，以及lable的样式

也没有进行设置。

所以我们要调整一下label样式及render的大小。

    //editor 增加图片尺寸信息显示///
    this.tLabel.leading = 2;
	this.tLabel.height = 30;
	this.size(100,120);
    ///

修改完成刷新编辑器查看效果，可以看到图片已经能够正常显示尺寸信息了。

至此，我们入门的第一个二次开发功能，预览界面添加图片尺寸信息显示已经完成。

1、多用断点调试工具。

多使用断点调试，能更快定位问题，也可以得到很多有用的信息。

2、维护好旧编辑器代码。

编辑器代码一般不会进行svn管理，所以自己在修改的时候记得保留原始代码（直接注释）。

防止意外情况丢失掉原始代码。

3、自己修改的地方做好标记及注释。

对自己修改的地方可以添加统一的修改标记，这样做有两个好处。一是方便在编辑器调试中

快速定位（也可以ctrl+g直接跳转行），二是后续进行持续修改时方便回看。

关注