Laya 富文本 HtmlDivElement

參考
富文本:LayaAir下 HtmlDivElement的使用匯總
富文本HtmlDivElement的使用
HTML文本

1.簡(jiǎn)單的Html屬性設(shè)置:Bold、Font、FontSize、Color、下劃線
示例如下:

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

2、獲取Html文本的實(shí)際內(nèi)容、獲取html文本的實(shí)際寬高(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'>創(chuàng)建的</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("文本內(nèi)容為"+txt);
trace("文本的實(shí)際寬度為"+htmlDiv.contextWidth,"文本的實(shí)際高度為"+htmlDiv.contextHeight)
Laya.stage.addChild(htmlDiv);

3、設(shè)置文本的水平居中對(duì)齊(align需要和width配合使用),換行(
換行需要有行高)、空格( ;)
【注意:目前不支持文本的垂直居中對(duì)齊,開(kāi)發(fā)可以將(圖片的高度-文本的高度)/2的值賦給文本的Y值,進(jìn)行垂直居中對(duì)齊的替代設(shè)置】
示例如下:

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、實(shí)現(xiàn)超鏈接
示例如下:

public function HtmlDemo()
{
var div:HTMLDivElement=new HTMLDivElement();
div.innerHTML="<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、實(shí)現(xiàn)html頁(yè)面跳轉(zhuǎn)
示例如下:

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

6、簡(jiǎn)單的圖片顯示
示例如下:

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

7、追加文本內(nèi)容appendHtml
示例如下:

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

8、解決IOS手機(jī)上英文字母顯示偏下的問(wèn)題
在style樣式中加垂直向上對(duì)齊valign:top屬性
示例如下:

var html:HTMLDivElement=new HTMLDivElement();
html.innerHTML = "<span style='color:#ffffff;valign:top;'>朋友a(bǔ)bc11''31ABC朋友</span>
<span  target='_blank'>百度</span>";
Laya.stage.addChild(html);

總結(jié):以上的方法僅供參考,某些方法只是實(shí)現(xiàn)方式的一種,開(kāi)發(fā)者也可以通過(guò)其他方式進(jìn)行設(shè)置,如果有哪些方法沒(méi)有涉及到的,歡迎開(kāi)發(fā)者提出來(lái),我們會(huì)陸續(xù)進(jìn)行補(bǔ)充!
9.換行
設(shè)置style.width會(huì)自動(dòng)換行,手動(dòng)換行需要在span標(biāo)簽后添加br
10.描邊
參考HTMLDivElement文本字體描邊怎么弄呢

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

11.斜體
不支持

12.滾動(dòng)條
參考建議官方針對(duì)HtmlDIVElement出和TextArea相關(guān)的功能
htmldivelement組件是沒(méi)有滾動(dòng)條的,它不具備輸入功能,不能編輯,有點(diǎn)類似flash的htmltext文本可以實(shí)現(xiàn)富文本圖文混排。textarea是支持滾動(dòng)條的文本輸入框,內(nèi)容本身不能存在圖片,不支持文本局部鏈接。
可以把htmldivelement放到一個(gè)容器里,然后把這個(gè)容器放到panel里,panel是支持滾動(dòng)條的,這樣可以通過(guò)內(nèi)容的填充顯示出滾動(dòng)條!

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'>創(chuàng)建的</span><br/>";
            html += "<span color='#d26ae3'>HTML文本</span>";
            
            p.innerHTML = html;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評(píng)論 1 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,423評(píng)論 4 61
  • IOS開(kāi)發(fā)庫(kù)開(kāi)發(fā)商搜索iTunes Connect開(kāi)發(fā)者指南 TestFlight beta測(cè)試(可選) 與試飛測(cè)...
    光明程輝閱讀 915評(píng)論 0 2
  • 都說(shuō)大理是兩個(gè)人的甜蜜,麗江才是一個(gè)人的艷遇。但我覺(jué)得哪里都可以是一個(gè)人,即使是在大理這座到處都可以看到情侶的城市...
    朝潮汐夕閱讀 421評(píng)論 7 5
  • 那年的夏天來(lái)的似乎晚了些,當(dāng)各地的人們穿上短袖還大汗淋漓的時(shí)候,我依然可以淡然的在短袖外邊加上格子衫。當(dāng)時(shí),我正...
    傾城傾國(guó)之戀閱讀 198評(píng)論 0 0

友情鏈接更多精彩內(nèi)容