innerHTML内嵌文字图片

最新推荐文章于 2024-08-17 09:09:55 发布

原创最新推荐文章于 2024-08-17 09:09:55 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

layabox 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了在处理一行文字中嵌入图片并保持整体居中的需求时，如何利用HTMLDivElement实现自适应居中。起初采用像素级坐标计算，但后来通过Laya的HTMLDivElement避免了繁琐的定位。然而，遇到图片因透明区域被裁剪导致尺寸不准确的问题，通过计算非透明区域尺寸并调整代码尺寸设置解决了问题。此外，为确保图片在混排中上下居中，添加了`valign="middle"`属性。

经常遇到这种需求（策划特别喜欢），一行文字中间需要嵌入图片，但是这行包括图片的文字又需要根据文字长度或者图片宽度自适应居中。

比较原始的方法是每种情况都放进去试下，量坐标，然后写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();
		}

再后来，发现图文混排时，图片没有上下居中，设置一下valign = "middle"即可