应用思考-教育技术论坛

标题: AS3元素处理：TextField [打印本页]

---

作者: etthink    时间: 2013-4-20 14:14
标题: AS3元素处理：TextField
文本这一块内容，算不上是Flash的重头戏，但也是不可缺少的一块内容。TextField的属性和方法众多，我们不用全部记住。但我们需要知道能实现哪些功能。
和面板对应的相关属性有：（继承属性我不列了）
text：文本内容。
htmlText：存储HTML文本的内容。如果要使用HTML文本时，请参阅帮助，了解支持哪些HTML元素，Flash支持的元素不多的。别指望实现太复杂的功能。可能也就<img>标签会比较有用些，可以插入外部的图片和SWF文件。
type：设置文本为动态文本还是输入文本。默认为动态文本。
textColor：设置字体颜色。
autoSize：对齐方式，只有无（默认）、左端对齐、居中对齐、右端对齐。没有两端对齐。
multiline：文本是否为多行文本。
wordWrap：文本是否自动换行。
displayAsPassword：输入的字符以密码形式显示。
border：是否具有边框。
selectable：文本字段是否可选。
maxChars：用户可输入的最大字符数。

属性面板不提供的常用设置属性：
background：是否具有背景填充色。
backgroundColor：当background属性设置为true时，设置背景颜色。
borderColor：当border属性为true时，设置边框颜色。
restrict：在输入文本中，限制用户可输入的字符集。

常用文本类编程属性：
length：获取文本所含字符数。
numLines：获取多行文本的总行数。
caretIndex：获取输入光标所在的位置（插入字符的那条一闪一闪的竖线）。
selectionBeginIndex：所选择文本的起始位置。
selectionEndIndex：所选择文本的结束位置。
textWidth：获取文本区域实际宽度。
textHeight：获取文本区域实际高度。
scrollH：当前水平滚动位置。设置该值可以实现文本水平滚动效果。
maxScrollH：scrollH的最大值。
scrollV：当前垂直滚动位置。设置该值可以实现文本垂直滚动效果。
maxScrollV：scrollV的最大值
bottomScrollV：返回当前可见文本区域的底部ScrollV值。

有关文本定位的相关方法：
（1）根据提供的字符索引值获取：
getCharBoundaries()：获得某一个字符的具体位置矩阵（该字符的x、y坐标，以及宽、高）。
getFirstCharInParagraph()：获取某一个字符所在段落的第一个字符索引值。
getParagraphLength()：获取某一个字符所在段落包含的字符个数。
getLineIndexOfChar()：获取某一个字符所在的行号。
（2）根据坐标获取：
getCharIndexAtPoint()：根据点坐标，获得当前位置的字符索引值。
getLineIndexAtPoint()：根据点坐标，获取当前行号。

和文本行相关的方法：
getLineLength()：获取某一行的字符个数。
getLineOffset()：获取某一行第一个字符的索引号。
getLineText()：获取某一行的文本内容。

接下来的两篇，也和TextField类有比较密切的关系。分别是TextFormat类和styleSheet对象。

---

作者: etthink    时间: 2013-4-20 14:15
（1）TextFormat包含的内容
和面板对应的相关属性有：
font：设置文本的字体名称，以字符串形式表示。
size：设置文本的字体大小，以磅值表示。
color：设置文本的字体颜色。
bold：设置文字是否为粗体。
italic：设置文字是否为斜体。
align：设置文本对齐方式。包括左端对齐、居中对齐、右端对齐、两端对齐。
indent：设置文本第一个字符的缩进像素。
leading：设置文本之间的行间距。
leftMargin：设置文本段落的左边距。
rightMargin：设置文本段落的右边距。
letterSpacing：设置文本的字间距。
kerning：设置是否启用自动调整字距功能。
url：设置文本的超链接地址。
target：设置超链接打开目标窗口的方式。
其他还有4个属性，是属性面板没有提供的设置，但是也几乎没有什么作用，所以我就不列出来了。

      （2）TextFormat的用法
      使用TextFormat之前，需要先实例化。具体代码如下：
      var format:TextFormat = new TextFormat(); //定义textFormat对象
      format.font = "Verdana"; //设置具体属性
      tt.defaultTextFormat = format; //设置默认格式
      tt.setTextFormat(format,1,8); //设置格式

      defaultTextFormat属性可以设置文本的默认格式。也就是说，当文本发生变化时，会自动应用设置的格式。但当前存在的文本是不会变化的。
      setTextFormat()方法刚好相反，可以设置当前文本的格式，或者具体设置其中一部分文本应用指定格式。但当文本发生变化时，是不会生效的。

      （3）关于TextFormat的一些自我看法
      结合TextField和TextFormat的属性，我们可以实现属性面板的所有设置功能。不过，Adobe的开发团队，对于这两个对象的开发应该是独立的，所以两者之间也存在着一些矛盾。比如：TextField的autoSize和textColor属性，和TextFormat的align、color属性，明显是重复的。体现在AS代码上，就是谁后写，就生效谁的。但是这样子是很容易产生错误的。
      所以我建议大家，还是用TextFormat对象来设置文本对齐方式和文本字体颜色，以免发生不必要的错误。毕竟，严格意义上来说，这两个属性也确实是TextFormat应该管的事。
      另外还有一个小点，TextField的文本对齐方式是不支持两端对齐的，但TextFormat是支持的。所以以为AS代码不支持两端对齐的朋友，你们的看法是错的。

---

作者: etthink    时间: 2013-4-20 14:17
styleSheet和TextFormat类似，也是用来定义文本格式的，二者实现的效果也差不多。但是，styleSheet和TextFormat之间，是存在兼容冲突的，设置了styleSheet的文本，将无法再使用TextFormat类，否则编译时会产生报错信息。
      那么，这两者之间的区别是什么呢，我大致归纳了下，有以下几点：
      (1) styleSheet只能对HtmlText使用，如果没有设置该属性则无法使用。TextFormat则不受该限制影响。
      (2) styleSheet可以通过修改外部CSS文件来变更文字格式，不用重新编译生成的SWF文件，这个也是styleSheet最大的优势。
      (3) 设置了styleSheet的文本字段是不可以再编辑的。所以如果是一个输入文本的话，应该避免使用styleSheet。
      由上也可以看到，CSS虽然说可以在Flash文件中创建，但我觉得，只有外部加载的CSS文件才有意义，否则，真的体现不出styleSheet的优势了。同时，如果你要应用styleSheet的话，建议先看下帮助，因为Flash支持的styleSheet样式元素并不多。

      下面我介绍下如何加载外部CSS文件，首先，我们要创建一个CSS文件，CSS文件我就完全不懂了，所以只好抄袭一段代码来，大家把下面这段代码复制到文本文件，然后命名为example.css，和Flash文件放在同一个目录下：
p {
font-family: Times New Roman, Times, _serif;
font-size: 14;
}
h1 {
font-family: Arial, Helvetica, _sans;
font-size: 20;
font-weight: bold;
}
.bluetext {
color: #0000CC;
}

      如果正确套用该CSS文件，文本会呈现蓝色字体。然后我们打开Flash，写入AS代码如下：
var loader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("example.css");
loader.load(req);
loader.addEventListener(Event.COMPLETE, onLoaded);
function onLoaded(event:Event) {
var sheet:StyleSheet = new StyleSheet(); //定义styleSheet实例
sheet.parseCSS(loader.data); //解析外部CSS文件
var myText:TextField = new TextField();
myText.styleSheet = sheet; //调用styleSheet实例
myText.htmlText = "<span class='bluetext'>测试文本</span>"; //采用styleSheet
addChild(myText);
}

      最后我再做点补充说明：
      (1) 首先要创建styleSheet实例，然后用parseCSS()方法解析读取的外部CSS文件
      (2) 必须在设置htmlText属性之前应用样式表，否则CSS样式是不会生效的。
      (3) 在htmlText文件中调用CSS的方法和正式网页中相同

---

欢迎光临 应用思考-教育技术论坛 (http://etthink.com/)

Powered by Discuz! X3.4