论坛首页 Web前端技术论坛

在Flex中实现自定义的Caret

浏览 1908 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-06-23  
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。
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics