Flex中的TextInput （5）：添加焦点效果

本文主要是介绍Flex中的TextInput （5）：添加焦点效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Flex中的TextInput控件在获得焦点的时候，输入框周围会出现蓝色的边框，当失去焦点的时候，蓝色边框消失。

其原理就是用一个Shape类画出蓝色边框。当TextInput获得焦点的时候，通过addChild把该Shape类对象加入显示列表；当TextInput失去焦点的时候，通过removedChild把该Shape类对象从显示列表中删除。

 

TextInputComponent.as

package {
import Component.MyTextInput;	
import flash.display.Sprite;
public class TextInputComponent extends Sprite
{
public function TextInputComponent()
{
var txt1:MyTextInput = new MyTextInput(100,100,200,20);
addChild(txt1);
var txt2:MyTextInput = new MyTextInput(100,130,300,15);
addChild(txt2);
}
}
}

MyTextInput.as

package Component
{
import flash.display.Sprite;
import flash.events.FocusEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import skins.Border;
import skins.FocusRect;
public class MyTextInput extends Sprite
{
private var _w:int;
private var _h:int;
private var _x:int;
private var _y:int;
private var _focusRect:FocusRect;
public function MyTextInput(x:int,y:int,width:int,height:int)
{
_x = x;
_y = y;
_w = width;
_h = height;
//设定焦点矩形
_focusRect = new FocusRect(_x-2,_y-2,_w+4,_h+4);
//监听焦点事件
addEventListener(FocusEvent.FOCUS_IN, focusInHandler);
addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);
CreateChild();
}
public function CreateChild():void{
//添加3D边框
var border:Border = new Border(_x,_y,_w,_h);
addChild(border);
//添加TextField
var txt:TextField = new TextField();
txt.type = TextFieldType.INPUT;
txt.x = _x + 1;
txt.y = _y + 1;
txt.width = _w-2;
txt.height = _h-2;
txt.background = true;
txt.backgroundColor = 0xffffff;
addChild(txt);
}
protected function focusInHandler(event:FocusEvent):void
{
addChild(_focusRect);
}
protected function focusOutHandler(event:FocusEvent):void
{
removeChild(_focusRect);
}
}
}

Border.as

package skins
{
import flash.display.Graphics;
import flash.display.Shape;
import mx.utils.ColorUtil;
public class Border extends Shape
{
//定义高度和宽度
private var _w:int;
private var _h:int;
private var _x:int;
private var _y:int;
public function Border(x:int,y:int,width:int,height:int)
{
_x = x;
_y = y;
_w = width;
_h = height;
drawBorder();
}
public function drawBorder():void
{
//定义边框颜色
var borderColor:uint;
var borderColorDrk1:uint
var borderColorDrk2:uint
var borderColorLt1:uint	
var borderInnerColor:uint;
//设定边框颜色
borderColor = 0xb7babc;		
borderColorDrk1 =
ColorUtil.adjustBrightness2(borderColor, -40);
borderColorDrk2 =
ColorUtil.adjustBrightness2(borderColor, +25);
borderColorLt1 = 
ColorUtil.adjustBrightness2(borderColor, +40);				
borderInnerColor = 0xffffff;
//画出3D边框效果
draw3dBorder(borderColorDrk2, borderColorDrk1, borderColorLt1,
Number(borderInnerColor), 
Number(borderInnerColor), 
Number(borderInnerColor));
}
public function draw3dBorder(c1:Number, c2:Number, c3:Number,
c4:Number, c5:Number, c6:Number):void
{
var g:Graphics = graphics;
g.clear();
// outside sides
g.beginFill(c1);
g.drawRect(_x, _y, _w, _h);
g.drawRect(_x+1, _y, _w - 2, _h);
g.endFill();
// outside top
g.beginFill(c2);
g.drawRect(_x+1, _y, _w - 2, 1);
g.endFill();
// outside bottom
g.beginFill(c3);
g.drawRect(_x+1, _y + _h - 1, _w - 2, 1);
g.endFill();
// inside top
g.beginFill(c4);
g.drawRect(_x+1, _y+1, _w - 2, 1);
g.endFill();
// inside bottom
g.beginFill(c5);
g.drawRect(_x+1, _y + _h - 2, _w - 2, 1);
g.endFill();
// inside sides
g.beginFill(c6);
g.drawRect(_x+1, _y+2, _w - 2, _h - 4);
g.drawRect(_x+2, _y+2, _w - 4, _h - 4);
g.endFill();
}
}
}

 

FocusRect.as

package skins
{
import flash.display.Graphics;
import flash.display.Shape;
/**
* 该代码改编自mx.skins.halo.HaloFocusRect
*/
public class FocusRect extends Shape
{
public function FocusRect(x:int,y:int,w:int,h:int)
{
super();
//设置画图要素
var focusBlendMode:String = "normal"; //getStyle("focusBlendMode");
var focusAlpha:Number = 0.4;          //getStyle("focusAlpha");
var focusColor:Number = 0x009dff;     //getStyle("focusColor");
var cornerRadius:Number = 0;          //getStyle("cornerRadius");
var focusThickness:Number = 2;        //getStyle("focusThickness");
var focusRoundedCorners:String = "tl tr bl br";  //getStyle("focusRoundedCorners");
var themeColor:Number = 0x009dff;     //getStyle("themeColor");			
var rectColor:Number = focusColor;
//画出代表焦点的矩形	
var g:Graphics = graphics;
g.clear();
var ellipseSize:Number;
// outer ring
g.beginFill(rectColor, focusAlpha);
ellipseSize = (cornerRadius > 0 ? cornerRadius + focusThickness : 0) * 2;
g.drawRoundRect(x, y, w, h, ellipseSize, ellipseSize);
ellipseSize = cornerRadius * 2;
g.drawRoundRect(x+focusThickness, y+focusThickness,
w - 2 * focusThickness, h - 2 * focusThickness,
ellipseSize, ellipseSize);
g.endFill();
// inner ring
g.beginFill(rectColor, focusAlpha);
ellipseSize = (cornerRadius > 0 ? cornerRadius + focusThickness / 2 : 0) * 2;
g.drawRoundRect(x+focusThickness / 2, y+focusThickness / 2,
w - focusThickness, h - focusThickness,
ellipseSize, ellipseSize);
ellipseSize = cornerRadius * 2;
g.drawRoundRect(x+focusThickness, y+focusThickness,
w - 2 * focusThickness, h - 2 * focusThickness,
ellipseSize, ellipseSize);
g.endFill();
}
}
}

效果图：

 

这篇关于Flex中的TextInput （5）：添加焦点效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---