谜一样的TextField

文章来之：http://hi.baidu.com/mr%5Fziqiang/blog/item/934de724121fdc348744f9d2.html

 

今天做表情聊天的整合，不料遭遇一个奇怪的问题。

使用TextField的getCharBoundaries（）方法时，居然有的时候无法取得索引字符的边框。测试了很多次都是只能一部分，后面的取到的都是null。

代码如下：

var txt = new TextField();

txt.width = 200;
txt.selectable = false;
txt.multiline = true;
txt.wordWrap = true;
txt.autoSize = "left";

addChild (txt);

for (var i=0; i<10; i++)
{
      txt.htmlText+="<font color='#00ff00'>这真是一个奇怪的问题啊</font>\n";
}

var indexArr=[];
var text=txt.text;

for (var index:int = 0; index < text.length; index++)
{
       if (text.charAt(index) == "一")
      {
             indexArr.push (index);
       }
}

for (var pos:int = 0; pos < indexArr.length; pos++)
{
       var tempPos:Rectangle = txt.getCharBoundaries(indexArr[pos]);
      trace(tempPos); //输出索引字符的边界矩形
}

联想到前段时间测试TextField时，如果字符在TextField的显示范围之外那么getCharBoundaries也是取到null。（也正是这个原因我没有使用TextField的自带的滚动功能而采用了mask方式。）于是尝试Trace 了一下文本的高度，没想到加一句Trace之后问题居然自动解决了。

加了Trace的代码：

var txt = new TextField();

txt.width = 200;
txt.selectable = false;
txt.multiline = true;
txt.wordWrap = true;
txt.autoSize = "left";

addChild (txt);

for (var i=0; i<10; i++)
{
      txt.htmlText+="<font color='#00ff00'>这真是一个奇怪的问题啊</font>\n";
}

var indexArr=[];
var text=txt.text;

for (var index:int = 0; index < text.length; index++)
{
       if (text.charAt(index) == "一")
      {
             indexArr.push (index);
       }
}
trace(txt.height);
for (var pos:int = 0; pos < indexArr.length; pos++)
{
       var tempPos:Rectangle = txt.getCharBoundaries(indexArr[pos]);
      trace(tempPos); //输出索引字符的边界矩形
}

分析：
      一般来说TextField有一个默认的高度100， 通过多次测试基本上输出为null的都是这个默认高度之外的字符。 我认为这个现象应该是TextField的一个小Bug，如果我们不用htmlText而使用text+=方式或者appendText方式添加，问题同样存在。

      也就是说自动增加行数之后，如果我们不对文本的尺寸操作。（width和height 都是getter setter实现的，无论你设置或者取得都算是操作）那么TextField的内部应该还是保留着这个默认的高度，而getCharBoundaries也是傻乎乎的通过内部的这个默认高度去取得，一旦发现你需要的这个字符的边界在默认高度之外自然就返回null了。

      对于这个问题打算反映到adobe一下。

解决方法：
      上述的分析不一定正确，但是你通过操作文本的尺寸确实是可以这个问题。

      上面的例子你如果不用trace(txt.height)而直接写txt.width；或者txt.height;也是没有问题。

补充：
      刚刚通过一个例子再次证明了我的推测。

      textField确实是有一个类似于_height 的私有变量，默认为100，无论我们通过text属性还是htmlText来添加文本，这个_height始终没有改变。

      我们可以理解为adobe在写text的setter方法时忘了了一个语句：_height=_textHeight;而恰恰getCharBoundaries在求边界的时候需要以这个_height作为条件。

如何证明这一推测：
      还是上面的第一个例子：
      在txt.width=200   后面添加一句txt.height=40; 结果为

(x=38, y=2, w=12, h=15)
(x=38, y=17, w=12, h=15)
(x=38, y=32, w=12, h=15)
null
null
null
null
null
null
null

在txt.width=200   后面添加一句txt.height=80; 结果为

(x=38, y=2, w=12, h=15)
(x=38, y=17, w=12, h=15)
(x=38, y=32, w=12, h=15)
(x=38, y=47, w=12, h=15)
(x=38, y=62, w=12, h=15)
(x=38, y=77, w=12, h=15)
null
null
null
null

测试结论：
      你会发现一个现象，所有大于height的边界都无法输出。