Laya 富文本 HtmlDivElement

参考
富文本:LayaAir下 HtmlDivElement的使用汇总
富文本HtmlDivElement的使用
HTML文本

1.简单的Html属性设置:Bold、Font、FontSize、Color、下划线
示例如下:

var div:HTMLDivElement=new HTMLDivElement();
div.innerHTML="<span style='font-weight:bold;" +
  "font:24px Arial' " +
  "color='red' " +
  "href='http://ask.layabox.com/www.baidu.com'>" +
  "LayaBox</span><span>欢迎你的加入</span>"
Laya.stage.addChild(div);

2、获取Html文本的实际内容、获取html文本的实际宽高(contextWidth、contextHeight)
示例如下:

var htmlDiv:HTMLDivElement=new HTMLDivElement();
var html:String = "<span color='#e3d26a'>使用</span>";
html += "<span style='color:#FFFFFF;font-weight:bold'>HTMLDivElement</span>";
html += "<span color='#6ad2e3'>创建的</span><br/>";
html += "<span color='#d26ae3'>HTML文本</span>";
htmlDiv.innerHTML=html;
htmlDiv.pos(50,200);
var txt:String = "";
var tTxt:String;
var tHTMLElement:HTMLElement;
for(var i:int = 0,n:int = htmlDiv._childs.length;i < n;i++)
{
tHTMLElement = htmlDiv.getChildAt(i) as HTMLElement;
if(tHTMLElement)
{
tTxt= tHTMLElement.text;
if(tTxt)
{
txt += tTxt;
}
}
}
trace("文本内容为"+txt);
trace("文本的实际宽度为"+htmlDiv.contextWidth,"文本的实际高度为"+htmlDiv.contextHeight)
Laya.stage.addChild(htmlDiv);

3、设置文本的水平居中对齐(align需要和width配合使用),换行(
换行需要有行高)、空格( ;)
【注意:目前不支持文本的垂直居中对齐,开发可以将(图片的高度-文本的高度)/2的值赋给文本的Y值,进行垂直居中对齐的替代设置】
示例如下:

var html3:HTMLDivElement=new HTMLDivElement();
html3.style.lineHeight=30;
html3.style.width=300;
html3.style.align="center";
html3.innerHTML="<br/><span>  我的第一行要换行</span>";
Laya.stage.addChild(html3);
 
var sp:Sprite=new Sprite();
sp.graphics.drawRect(0,0,300,30,null,"#999999");
Laya.stage.addChild(sp);

4、实现超链接
示例如下:

public function HtmlDemo()
{
var div:HTMLDivElement=new HTMLDivElement();
div.innerHTML="<span href='http://ask.layabox.com/'>LayaBox欢迎你的加入!</span>";
div.on(Event.LINK,this,onLink);
Laya.stage.addChild(div);
}
private function onLink(data:*):void
{
// TODO Auto Generated method stub
Browser.window.location.href=data;
}

5、实现html页面跳转
示例如下:

var iHtml:HTMLIframeElement=new HTMLIframeElement();
Laya.stage.addChild(iHtml);
iHtml.href="res/html/test.html";

6、简单的图片显示
示例如下:

var imageHtml:HTMLDivElement=new HTMLDivElement();
imageHtml.innerHTML="![](res/boy.png)</img>";
Laya.stage.addChild(imageHtml);

7、追加文本内容appendHtml
示例如下:

var appendHtml:HTMLDivElement=new HTMLDivElement();
appendHtml.innerHTML="<span>AAAAAA</span>";
Laya.stage.addChild(appendHtml);
appendHtml.appendHTML("<br/>  BBBBBBBBBB");
appendHtml.layout();

8、解决IOS手机上英文字母显示偏下的问题
在style样式中加垂直向上对齐valign:top属性
示例如下:

var html:HTMLDivElement=new HTMLDivElement();
html.innerHTML = "<span style='color:#ffffff;valign:top;'>朋友abc11''31ABC朋友</span>
<span href='http://www.baidu.com' target='_blank'>百度</span>";
Laya.stage.addChild(html);

总结:以上的方法仅供参考,某些方法只是实现方式的一种,开发者也可以通过其他方式进行设置,如果有哪些方法没有涉及到的,欢迎开发者提出来,我们会陆续进行补充!
9.换行
设置style.width会自动换行,手动换行需要在span标签后添加br
10.描边
参考HTMLDivElement文本字体描边怎么弄呢

div.innerHTML='<span style="stroke:2;strokeColor:#ffff00">hello</span>';

11.斜体
不支持

12.滚动条
参考建议官方针对HtmlDIVElement出和TextArea相关的功能
htmldivelement组件是没有滚动条的,它不具备输入功能,不能编辑,有点类似flash的htmltext文本可以实现富文本图文混排。textarea是支持滚动条的文本输入框,内容本身不能存在图片,不支持文本局部链接。
可以把htmldivelement放到一个容器里,然后把这个容器放到panel里,panel是支持滚动条的,这样可以通过内容的填充显示出滚动条!

13.参考示例

            var p:HTMLDivElement = new HTMLDivElement();
            Laya.stage.addChild(p);

            p.style.font = "Impact";
            p.style.fontSize = 30;

            var html:String = "<span color='#e3d26a'>使用</span>";
            html += "<span style='color:#FFFFFF;font-weight:bold'>HTMLDivElement</span>";
            html += "<span color='#6ad2e3'>创建的</span><br/>";
            html += "<span color='#d26ae3'>HTML文本</span>";
            
            p.innerHTML = html;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,098评论 4 62
  • IOS开发库开发商搜索iTunes Connect开发者指南 TestFlight beta测试(可选) 与试飞测...
    光明程辉阅读 810评论 0 2
  • 都说大理是两个人的甜蜜,丽江才是一个人的艳遇。但我觉得哪里都可以是一个人,即使是在大理这座到处都可以看到情侣的城市...
    朝潮汐夕阅读 338评论 7 5
  • 那年的夏天来的似乎晚了些,当各地的人们穿上短袖还大汗淋漓的时候,我依然可以淡然的在短袖外边加上格子衫。当时,我正...
    倾城倾国之恋阅读 175评论 0 0