4.10.把字符当作独立图像处理
4.10.1. 问题
我想把独立的字符当作图像一样进行特效处理。
4.10.2. 解决办法
使getCharBoundaries 方法来取得TextField 中字符的实际宽高xy 值。然后从TextField 创建一个包含你想要的字符的位图。
4.10.3. 讨论
getCharBoundaries 返回一个形容TextField 中字符索引的宽高xy 值的矩形。你可以用这个信息创建一个字符的位图，保留它的全部可视信息，并使这些位图看上去很真实。下面这段代码就是处理的关键:
char_bounds 对象是一个将要储存所有这个字符相关信息的矩形。这个信息用来在创建位图时创建一个flash.display.BitmapData 对象以便显示在位图内。BitmapData 的构造器接收4个参数:
现在你拥有了这个位图对象，创建一个Matrix 来储存那个你想捕捉的TextField 中特殊区域的信息，也就是，getCharBoundaries 方法返回的绑定了TextField 的矩形区域。这个Matrix 被传给BitmapData draw 方法，这个方法同时也从载入的DisplayObject 中提取像素数据。当你画完实际的位图数据后，通过使用最新最流行的BitmapData 对象，你就可以创建一个Bitmap 对象，这个对象也同时是一个DisplayObject，可以被添加到显示列表中。
剩下的例子就是处理TextField 中的字符循环了，对每一个字符都执行前面的操作，然后一个又一个栩栩如生的位图对象就被创建了:
这个例子使用一个AccessibleTextInput 来控制，一个简单的TextInput 控制器扩展，用来提供对TextInput 中的TextField 控制器的访问能力。:
这让你简单地把TextFormat 对象传递给用来进行位图操作的TextField，同时为getCharBoundaries 方法直接从TextField 读取。
我想把独立的字符当作图像一样进行特效处理。
4.10.2. 解决办法
使getCharBoundaries 方法来取得TextField 中字符的实际宽高xy 值。然后从TextField 创建一个包含你想要的字符的位图。
4.10.3. 讨论
getCharBoundaries 返回一个形容TextField 中字符索引的宽高xy 值的矩形。你可以用这个信息创建一个字符的位图，保留它的全部可视信息，并使这些位图看上去很真实。下面这段代码就是处理的关键:
+展开
-ActionScript
char_bounds = addCharacters.getTextField().getCharBoundaries(i);
bitmapData=new BitmapData(char_bounds.width, char_bounds.height, true, 0);
matrix = new Matrix(1, 0, 0, 1, -char_bounds.x, char_bounds.y);
bitmapData.draw(addCharacters.getTextField(), matrix, null, null, null, true);
bitmap = new Bitmap(bitmapData);
bitmapData=new BitmapData(char_bounds.width, char_bounds.height, true, 0);
matrix = new Matrix(1, 0, 0, 1, -char_bounds.x, char_bounds.y);
bitmapData.draw(addCharacters.getTextField(), matrix, null, null, null, true);
bitmap = new Bitmap(bitmapData);
char_bounds 对象是一个将要储存所有这个字符相关信息的矩形。这个信息用来在创建位图时创建一个flash.display.BitmapData 对象以便显示在位图内。BitmapData 的构造器接收4个参数:
+展开
-ActionScript
BitmapData(width:Number, height:Number, transparency:boolean, fillColor:Number);
现在你拥有了这个位图对象，创建一个Matrix 来储存那个你想捕捉的TextField 中特殊区域的信息，也就是，getCharBoundaries 方法返回的绑定了TextField 的矩形区域。这个Matrix 被传给BitmapData draw 方法，这个方法同时也从载入的DisplayObject 中提取像素数据。当你画完实际的位图数据后，通过使用最新最流行的BitmapData 对象，你就可以创建一个Bitmap 对象，这个对象也同时是一个DisplayObject，可以被添加到显示列表中。
剩下的例子就是处理TextField 中的字符循环了，对每一个字符都执行前面的操作，然后一个又一个栩栩如生的位图对象就被创建了:
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
height="300" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
import flash.display.Sprite;
import mx.core.UIComponent;
import flash.text.TextField;
import flash.text.TextFormat;
private var characterArray:Array = new Array();
//set up our master character index we're going to use when animating the characters
private var charIndex:int = 0;
//keep track of the final position we're going to place all the characters in
private var finalX:Number = 0;
private function addNewCharacters():void
{
render();
invalidateDisplayList();
invalidateProperties();
}
public function render():void
{
//define all the variables that we'll need
var bitmapData:BitmapData;
var bitmap:Bitmap;
var char_bounds:Rectangle;
var matrix:Matrix;
var component:UIComponent;
//get the text format and set the
//tf.defaultTextFormat = addCharacters.getTextField().defaultTextFormat;
//tf.text = addCharacters.text;
for each(component in characterArray)
{
holder.removeChild(component);
}
characterArray.length = 0;
for(var i:int=0; i<addCharacters.text.length; i++)
{
char_bounds =
addCharacters.getTextField().getCharBoundaries(i);
bitmapData=new
BitmapData(char_bounds.width,char_bounds.height,
true,0);
matrix = new Matrix(1,0,0,1,-char_bounds.x,char_bounds.y);
bitmapData.draw(addCharacters.getTextField(),
matrix, null, null,null, true);
bitmap = new Bitmap(bitmapData);
component = new UIComponent();
component.width = bitmapData.width;
component.height = bitmapData.height;
component.addChild(bitmap);
holder.addChild(component);
component.x=char_bounds.x;
characterArray[i] = component;
}
holder.invalidateDisplayList();
startEffect();
}
private function startEffect():void
{
addEventListener(Event.ENTER_FRAME, moveCharacter);
}
private function moveCharacter(event:Event):void
{
var comp:UIComponent = (characterArray[charIndex] as
UIComponent);
if(comp)
{
if(comp.x < 200 - finalX)
{
(characterArray[charIndex] as Sprite).x+=2;
}
else
{
if(charIndex == characterArray.length - 1)
{
removeEventListener(Event.ENTER_FRAME,
moveCharacter);
return;
}
finalX += comp.width+2;
charIndex++;
}
}
}
]]>
</mx:Script>
<mx:HBox>
<cookbook:AccessibleTextInput id="addCharacters"
fontSize="18"/>
<mx:Button label="add characters"
click="addNewCharacters()"/>
</mx:HBox>
<mx:Canvas id="holder" y="200"/>
</mx:Canvas>
height="300" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
import flash.display.Sprite;
import mx.core.UIComponent;
import flash.text.TextField;
import flash.text.TextFormat;
private var characterArray:Array = new Array();
//set up our master character index we're going to use when animating the characters
private var charIndex:int = 0;
//keep track of the final position we're going to place all the characters in
private var finalX:Number = 0;
private function addNewCharacters():void
{
render();
invalidateDisplayList();
invalidateProperties();
}
public function render():void
{
//define all the variables that we'll need
var bitmapData:BitmapData;
var bitmap:Bitmap;
var char_bounds:Rectangle;
var matrix:Matrix;
var component:UIComponent;
//get the text format and set the
//tf.defaultTextFormat = addCharacters.getTextField().defaultTextFormat;
//tf.text = addCharacters.text;
for each(component in characterArray)
{
holder.removeChild(component);
}
characterArray.length = 0;
for(var i:int=0; i<addCharacters.text.length; i++)
{
char_bounds =
addCharacters.getTextField().getCharBoundaries(i);
bitmapData=new
BitmapData(char_bounds.width,char_bounds.height,
true,0);
matrix = new Matrix(1,0,0,1,-char_bounds.x,char_bounds.y);
bitmapData.draw(addCharacters.getTextField(),
matrix, null, null,null, true);
bitmap = new Bitmap(bitmapData);
component = new UIComponent();
component.width = bitmapData.width;
component.height = bitmapData.height;
component.addChild(bitmap);
holder.addChild(component);
component.x=char_bounds.x;
characterArray[i] = component;
}
holder.invalidateDisplayList();
startEffect();
}
private function startEffect():void
{
addEventListener(Event.ENTER_FRAME, moveCharacter);
}
private function moveCharacter(event:Event):void
{
var comp:UIComponent = (characterArray[charIndex] as
UIComponent);
if(comp)
{
if(comp.x < 200 - finalX)
{
(characterArray[charIndex] as Sprite).x+=2;
}
else
{
if(charIndex == characterArray.length - 1)
{
removeEventListener(Event.ENTER_FRAME,
moveCharacter);
return;
}
finalX += comp.width+2;
charIndex++;
}
}
}
]]>
</mx:Script>
<mx:HBox>
<cookbook:AccessibleTextInput id="addCharacters"
fontSize="18"/>
<mx:Button label="add characters"
click="addNewCharacters()"/>
</mx:HBox>
<mx:Canvas id="holder" y="200"/>
</mx:Canvas>
这个例子使用一个AccessibleTextInput 来控制，一个简单的TextInput 控制器扩展，用来提供对TextInput 中的TextField 控制器的访问能力。:
+展开
-XML
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function getTextField():IUITextField
{
return this.textField;
}
]]>
</mx:Script>
</mx:TextInput>
<mx:Script>
<![CDATA[
public function getTextField():IUITextField
{
return this.textField;
}
]]>
</mx:Script>
</mx:TextInput>
这让你简单地把TextFormat 对象传递给用来进行位图操作的TextField，同时为getCharBoundaries 方法直接从TextField 读取。
加支付宝好友偷能量挖...
