【Laya游戏开发实战（一）】富文本HTMLDivElement + Panel 实现滚动

最新推荐文章于 2022-11-04 15:20:11 发布
最新推荐文章于 2022-11-04 15:20:11 发布
阅读量757 收藏
点赞数 1
分类专栏： Laya 文章标签： 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31713583/article/details/108875759
版权

在laya开发中有时需要显示多行文字，用Label虽然可以换行显示但是当文字数量达到一定程度时就不太好用了，所以换成HTMLDivElement 富文本框显示文字，但是因为HTMLDivElement控件本身是不带滚动条的，所以需要配合 Panel，将Panel设置成HTMLDivElement 的父节点，并设置Panel的滚动条就可以滚动HTMLDivElement 里的内容

inwish
关注
专栏目录
Laya的滚动容器Panel+HBox
xuniwawa010的专栏
07-09 1489
版本：Laya 2.2.0 参考：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-18 一 拖动一个panel和hbox到舞台，并且在hbox里放图片 二 设置panel滚动条 如果不设置panel的滚动条skin，这个panel是不会滚动的 拖动assets/comp/hscroll.png到属性面板hScrollBarSkin上 hbox的布局效果，只有在运行时才能看见 三 最终效果...
LAYA_展示富文本
qq_40947729的博客
11-18 2342
需求：当后台提供一段富文本之后，将富文本转化为合适的text展示在laya中。 可行的方法： 1，使用laya.htmlDivElement. 2，使用正则表达式。将富文本中的部分文字转化为纯文本。 第一种方法：需要用html5来进行排版和写文本样式，比较麻烦。 第二种方法：可以直接使用laya.text对象。更加直观。（可以在编辑器内） ...
Laya 对 Text 扩展 实现 富文本 不用引入 HtmlDivElement
cyj
10-25 931
Laya 富文本 扩展 Text 实现 富文本 Laya 对 Text 扩展 实现 富文本 不用引入 HtmlDivElement
layabox 文本 html,LayaBox:富文本HtmlDivElement常用设置
weixin_29231725的博客
06-21 1403
注意：目前不支持斜体、描边、span标签内嵌的方式；不支持文本的垂直居中对齐var htmlDiv: Laya.HTMLDivElement = new Laya.HTMLDivElement();htmlDiv.innerHTML = "使用HTMLDivElement创建HTML文本";var tTxt: string;var tHTMLElement: Laya.HTMLElement;fo...
html5文档增加element,富文本：LayaAir下 HtmlDivElement的使用汇总
weixin_36317943的博客
06-04 815
1.简单的Html属性设置：Bold、Font、FontSize、Color、下划线【注意，不支持斜体、描边、span标签内嵌的方式】示例如下：var div:HTMLDivElement=new HTMLDivElement();div.innerHTML=""color='red' " +"href='www.baidu.com'>" +"LayaBox欢迎你的加入"Laya.stage...
laya2.0 HTMLDivElement的一些问题
游戏人生
04-12 1760
使用例子 var p = new HTMLDivElement(); Laya.stage.addChild§; p.style.font = “Impact”; p.style.fontSize = 30; var html = “使用”; html += “HTMLDivElement”; html += “创建的”; html += “HTML文本”; p.innerHTML = ht...
Laya2.2.0版本2D游戏开发
06-16
在本文中，我们将深入探讨使用Laya2.2.0版本进行2D游戏开发的知识点。Laya是一个强大的跨平台游戏引擎，它支持HTML5、Android以及iOS等多个平台，为开发者提供了一套高效且易用的工具链，使得2D游戏开发变得简单。 ...
Laya 2.0 开发3D小游戏 入门教学
07-01
本课程是用的Laya 2.0开发3D游戏，从安装开发环境，到游戏细节，手把手教学，详细开发思路和过程，希望能给想入行的同学带来些许帮助。
laya 游戏开发.zip
最新发布
04-19
本压缩包“laya 游戏开发.zip”可能包含了一系列关于如何使用Laya进行游戏开发的教程、示例代码、文档和其他资源。 1. **Laya简介**：Laya是一个基于WebGL和WebAudio的开源游戏引擎，它提供了丰富的API和工具集，让...
Laya富文本工具类(支持多色文字|字体设置|指定文本点击响应)
jts666的博客
11-04 1496
Laya富文本工具类(支持多色文字|字体设置|指定文本点击响应)
PMEdit--富文本框
05-12
说一下本文本框的设计： 1、文本框代码量小只有5000多行，全部是核心代码 2、文本框的设计是为了给PMGrid表格作为文本输入用的，PMGrid是一个美丽的类似于Excel的富文本表格，由于此表格正在开发中暂时就不开源了，样例可以看看源代码中的PMGrid.exe，如果有需要也可以给我发邮件feirench@gmail.com。 3、文本框内存占用小，除了作为背景双缓存的几个bitmap，就只是几个int数据，所以内存还是很放心的 4、文本框通篇使用了json作为数据存储，Json具有强大的灵活性，如果是界面开发，将本文本框作为基本输入要素，都不需要数据结构了一个json搞定，将程序作为一个大的json，下面挂页面json，页面下挂多个文本框json就OK了。 5、本文本框的缺点就是没有做增量分析，导致数据量过大的时候会会影响编辑效果，但是5000行文本的编辑是完全可以搞定的，毕竟作为表格的输入数据量不会很大的，如果要实现更大数量级的编辑花费的功夫就需要成倍了，对于一个独立开发者来说可能就得不偿失了！ 6、由于图片是全部加载到内存中，如果图片太多也会占用很大的内存 7、文本框未支持国际化，现在仅设计为中文环境中使用，版本二会进行改进 8、很大的特点就是支持在explore中复制文件然后粘贴到文本框中，支持两种类型文件的粘贴：纯文本、图片，支持多选 9、本文本框的Json是本人自己设计的扩展json类型TJSON，可以保存二进制数据，可以添加注释。它的效率应该还是不错的，易用性方面也非常不错，解析和读写参考了CJSON的源代码。开源的所有JSON解析源码中，性能最高的就应该是CJSON了，但是易用性方面也是最差的，可能300行的代码用CJSON就需要写上400行代码，有得也有失去。TJSON的数据量比较小，sizeof(TJSON)==40,并且具有遍历迭代器TJSONIterator、TJSONConstIterator，易用性就跟vector等容器一样；内部实现直接用的是map和vector，性能瓶颈也就是map、vector的性能瓶颈。 二、PMEdit是一个在windows下的富文本框，它能显示文字、编辑文字、显示图片、改变图片显示大小，具有行号、行图标、改变字体属性等特性。 PMEdit完成从底层开发，没有用任何windows控件，代码直接基于最基本GUI、windows消息，很容易移植到OpenGL或其他平台下。 三、样例显示 A、文本编辑 B、图片显示 C、GIF动画展示 D、富文本显示 E、改变背景 F、表格的样例 .........
layui富文本
weixin_42538504的博客
11-04 323
上源码 <!DOCTYPE html> <html> <head> <title>layui富文本</title> <link rel="stylesheet" type="text/css" href="./dist/css/layui.css"> <style type="text/css"> ...
Laya引擎富文本解析问题
qq_40877071的博客
06-11 944
Html做富文本 Laya用Html做富文本时 解析Html格式 在开发工具里报错： Uncaught 需要引入xml解析库文件 解决方法： 在game.js 中加入 window.Parser = require(“js/dom_parser”);
panel滚动区域
远行的博客
09-19 962
panel是LAYA提供的一种滚动组件，LIST也可以滚动。 给panel直接添加子元素，发现panel的滚动区域有点大，最后一个子元素可以一直滑到panel中间，而策划想要的效果确实panel的最后一个子元素，滑到panel边缘就不要再滑动。 实现方法是在UI编辑器里面给panel添加一个子元素box，把原本需要添加到panel的元素添加到box，设置一个变量tempY记录box所有子元素的...
Laya 常用功能封装
MySQL与Unity交互
06-02 872
（不定期更新） 19-06-02更新 1.随机数（TS脚本） Laya内已有随机数方法以0~1取值为基准，拓展后，任意正整数区间，代码如下 /** * 随机数 * @param min 最小数 * @param max 最大数 */ private randomNumber(min: any, max: any): any ...
laya.html.dom,轻量级Laya游戏框架
weixin_35343856的博客
06-10 618
【实例简介】一个轻便的Laya框架,模块化的方式完全解耦,注释全,个人经验整理【实例截图】【核心代码】Mana└── Mana├── Mana.laya├── bin│ ├── index.html│ ├── js│ │ ├── LayaUISample.js│ │ ├── LayaUISample.js.map│ │ ├── Mana.js│ │ ├── ...
html div element,使用HtmlDivElement取不到实际大小
weixin_29889665的博客
06-15 358
加过延迟还是不行。刚才试了一下，貌似加上就不能计算了,代码如下:(function(){var Stage = Laya.Stage;var HTMLDivElement = Laya.HTMLDivElement;var HTMLIframeElement = Laya.HTMLIframeElement;var Browser = Laya.B...
Laya HTMLDivelement组件微信小游戏使用问题
魂影魔宅
09-08 1916
官方提供了HTMLDivelement组件在微信小游戏使用的方案，需要开发者在game.js里单独的引入xml解析文件，用法如下： require("weapp-adapter.js"); window.Parser = require("./js/dom_parser"); 这里还需要引入LayaAir引擎库，AS3跟JS或TS不一样，这里自行引入即可。 代码片段： var p ...
Laya中添加html元素根据Laya中的位置自动定位
ju__ju的博客
01-24 912
Laya项目中有时候需要用到html元素 比如此处,使用了ICE的UI组件库,代码中原本是直接定位上去的,但是当窗口发生变化时,Laya元素会自动缩小适配,而html元素的定位出现偏移等问题.于是就考虑,在原位置创建一个Laya元素,然后将html元素定位在Laya元素里面,从而达到html跟随窗口大小而变化的需求. //1.创建Laya中的元素并设置宽高,并添加到Laya对应的块中 let spr = new Laya.Box() spr.width = 100 spr.height = 1
laya富文本如何插入一个图片
04-13
您好！关于Laya富文本如何插入图片，您可以使用Laya的类库laya.html.dom.HTMLImageElement来实现。方法是先将图片转成base64格式的字符串，然后通过该类库的实例化对象设置src属性即可。您可以参考下面的示例代码： ```javascript var img = new Laya.html.dom.HTMLImageElement(); img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCA...";//图片的base64编码 var div = new Laya.HTMLDivElement(); div.addChild(img); ``` 需要注意的是，Laya的富文本不支持直接插入外部图片链接，必须将图片转换成base64编码格式才能嵌入到富文本中。希望对您有所帮助！谢谢！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值