在Flex中实现自定义的Caret

本文介绍了一种在Flex中实现Caret(光标)闪烁效果的方法,通过使用Timer类并结合系统时间来精确控制Caret的状态切换,解决了常规Timer触发事件不准确的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flex中只有TextField组件实现了Caret,即插入位置的显示功能。最近研究Editor,自己实现了一个Caret类。

难点:如何按固有频率切换状态(显示--擦除)

大家知道Flex中,用Timer触发定期事件不准确,因此使用Timer处理Caret状态,自然也有类似问题。经试验确实存在此问题,需另寻途径。

还要回到Timer定时器上,如果我们定义一个间隔非常短的定时器,对系统时间进行轮询,有了系统时间,而且在极短的时间内如毫秒级,几乎可以认为是连续的“Thread”了。只要能记住第一次显示Caret的时间,就可以在擦除时刻或下一个显示时刻进行相应的操作。

最终效果不错。

代码如下:


package
{
import flash.events.TimerEvent;
import flash.utils.Timer;

import mx.core.UIComponent;

public class Caret extends UIComponent
{
private static var DELAY:uint = 700; //mileseconds
private static var PERIOD:uint = 1000; //mileseconds
private static var DELTA:uint = 20;
private var startTime:Date;

private var started:Boolean = false;

private var checkTimer:Timer = new Timer(1);
override public function Caret()
{
super();
createCaret();
}

private function createCaret():void{
draw();
checkTimer.addEventListener(TimerEvent.TIMER,checkTimer_handler);
checkTimer.start();
}


private function checkTimer_handler(event:TimerEvent):void{
var date:Date = new Date();
var elapsed:Number = (date.time-startTime.time)%PERIOD;
trace(elapsed);
if(elapsed>=(DELAY-DELTA) && elapsed<=DELAY){
this.graphics.clear();
trace("clear");
}
else if(elapsed>(PERIOD-DELTA) && elapsed<=PERIOD){
draw();
}
}

public function draw():void{
if(!started){
this.startTime = new Date();
started = true;
}
this.graphics.drawRect(10,30,2,20);
this.graphics.beginFill(0x000000);
trace("draw");
}
}
}


今天的研究结果表明,上述连续的Thread根本不可能保证,视代码而定。这部分内容属于高级内容。如有兴趣,请见http://www.bit-101.com/blog/?p=910。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值