innerHTML內嵌文字圖片

經常遇到這種需求（策劃特別喜歡），一行文字中間需要嵌入圖片，但是這行包括圖片的文字又需要根據文字長度或者圖片寬度自適應居中。

比較原始的方法是每種情況都放進去試下，量座標，然後寫if條件進行判斷，不同條件設置不同的座標實現居中。

後來發現LAYA提供的HTMLDivElement支持同時包含文字和圖片，引擎在渲染時，如果是文字，則會用HTMLElement進行渲染，如果是圖片，則會用HTMLImageElement進行渲染。

於是博主很輕鬆地就藉助引擎實現了整行自適應居中，從苦逼的像素級座標計算中解放出來了。

代碼如下

var html:HTMLDivElement = new HTMLDivElement();
var url:String = "icon.png";
var str:String = "文本內容1" + "<img src = '" + url + "' style = 'width:28;height:28' ">"+"文本內容2";
html.style.align  = "center";
html.style.fontSize = 20;
html.innerHTML = str;

這裏可以任意設置字體大小和圖片大小，最後引擎會自動實現圖文整體上下居中，完美。

但是後來再次使用此方法實現居中的時候，發現圖片變形了，用UI編輯器給UI添加相同的圖片，想同的尺寸，用HTMLDivElement

new出來的寬高要小一些。

查看引擎源碼發現HTMLImageElement對圖片進行渲染時會對透明區域進行裁剪，所以innerHTML裏面設置的圖片尺寸實際上是對非透明區域圖片部分進行設置的，如果仍然要用innerHTML實現圖文混合自適應居中，可以先計算非透明區域尺寸（打個斷點就能看到了），然後再調整代碼裏設置的尺寸即可。

引擎HTMLImageElement圖片渲染裁剪透明區域關鍵代碼如下

		private function onloaded():void {
			if (!_style) return;
			var style:HTMLStyle = _style as HTMLStyle;
			//width和height爲裁剪掉透明區域後的實際寬高，圖片原始尺寸(包括被裁減的透明區域)爲sourceWidth和sourceHeight
			var w:Number = style.widthed(this) ? -1 : _tex.width;
			var h:Number = style.heighted(this) ? -1 : _tex.height;
			
			if (!style.widthed(this) && _width != _tex.width) {
				width = _tex.width;
				parent && parent._layoutLater();
			}
			
			if (!style.heighted(this) && _height != _tex.height) {
				height = _tex.height;
				parent && parent._layoutLater();
			}
			repaint();
		}