Extjs-实用工具获取文本所占的高度和宽度 Ext.util.TextMetrices

最新推荐文章于 2019-01-16 11:29:42 发布

原创最新推荐文章于 2019-01-16 11:29:42 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#工具

Extjs 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用Ext.util.TextMetrics测量文本的尺寸，包括获取文本高度和宽度、应用CSS样式及设置文本最大宽度的方法。

公共部分

<body>
  <div id='text'></div>
  <div id='result'></div>
</body>

1.可以获取页面上文本所占的高度和宽度

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	//createInstance创建一个实例
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	/*
    		getSize(),Ext自动得到id='text'这个标签上定义的CSS样式,并以此计算文本的大小
    		如果把我的坐标显示在标签中,坐标为宽61高18
    	*/
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;

	});
</script>

2.对于已经创建好的metrics实例

我们改变文本显示相关的CSS样式,可以使用bind(),它的参数是HTML上的标签,它将这个标签的CSS样式复制过来,用作计算下一次的计算文本的高度和宽度的依据

代码

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
    	//复制CSS相关样式
    	metrics.bind('result');
    	var size = metrics.getSize('复制了CSS相关样式');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
	});
</script>

3.设置文本最大宽度

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
	    var metrics = Ext.util.TextMetrics.createInstance('result');
	    //设置文本最大宽度
	    metrics.setFixedWidth(100);
	    var size = metrics.getSize('我的坐标');
	    Ext.getDom('result').innerHTML += size.width + ',' + size.height + '<br />';
	});
</script>