`
zerozone
  • 浏览: 203803 次
  • 来自: 北京
社区版块
存档分类
最新评论

在Flex中实现自定义的Caret

阅读更多
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。
分享到:
评论

相关推荐

    前端项目-Caret.js.zip

    4. **处理文本选区**:除了光标位置,`Caret.js` 还可能支持选择文本的操作,这在实现复制、粘贴、剪切等操作时非常关键。 **应用场景** - **富文本编辑器**:在富文本编辑器中,用户需要能够选择、格式化和插入...

    前端项目-caret.zip

    这个名为"Caret"的前端项目专注于处理在文本框(input元素)或内容可编辑元素(如contenteditable属性)中光标的操作与管理。这样的功能对于构建富文本编辑器、代码编辑器或者任何需要用户输入文本的交互式应用至关...

    Better caret movement by words在IDE中移动快速单词的宏(5KB)

    标题中的“Better caret movement by words”指的是在集成开发环境(IDE)中改进的光标(或插入符)按单词移动的宏。这种宏通常是为了提高程序员的编辑效率,使他们能够在代码编辑器中更快地定位到目标单词。在编程...

    jquery 美化select 自定义函数

    本文将详细介绍如何在jQuery基础上美化`select`,并实现自定义函数,同时确保原有的功能如取值、增删改等操作不受影响。 首先,我们需要引入jQuery库。如果您的项目中还未包含jQuery,可以通过以下HTML代码将其引入...

    caret chreatsheet

    caret 套件支持并行处理,可以使用 foreach 包来实现并行处理。用户可以通过注册 doMC 包来实现并行处理。例如: ```R library(doMC) registerDoMC(cores = 4) train(y ~ ., data = dat, ...) ``` 其他选项 caret...

    Caret

    在R中,Caret库的重要性在于它简化了数据科学工作流程。它不仅包含了大量的机器学习算法,如决策树、随机森林、支持向量机、神经网络等,还提供了交叉验证、特征选择、模型调优等工具。Caret 包的核心功能之一是`...

    CARET_Models:比较CARET包中的回归模型并找到性能最佳的模型

    在“CARET_Models-master”文件中,我们可以预期找到一系列的R脚本或报告,这些文件可能详细记录了如何利用CARET包对多个回归模型进行训练和比较的过程。 首先,CARET包中的`train()`函数是建立模型的关键。这个...

    skylark-jquery-caret:jQuery插入符的一个版本,可移植到在skylark.js上运行

    例如,在实现自动补全、富文本编辑器或者各种动态输入效果时,都需要精确地操控插入符的位置。`skylark-jquery-caret`插件正是为了解决这个问题而诞生的,它提供了丰富的API,使开发者能够方便地获取和设置文本框的...

    electron+vue实现div contenteditable截图功能.docx

    在 electron+vue 实现 div contenteditable 截图功能中,electron 负责提供桌面应用程序的基础架构,而 vue 负责构建应用程序的用户界面。在这个应用程序中,div contenteditable 元素用于允许用户输入和编辑文字...

    aRgh:基本的R项目,包括Prophet预测,Caret分类模型和Quantmod项目

    在本项目中,你可能发现Caret被用来构建分类模型,如二元分类或多类分类问题,以及如何使用caret的函数进行特征工程、交叉验证和模型性能评估。 最后,Quantmod是一个用于金融数据分析和交易策略回测的R包。它提供...

    jquery-caret:从 https 分叉

    当然, At.js 也在使用这个插件。 支持 iframe 上下文 现场演示 用法 // Get caret position $ ( '#inputor' ) . caret ( 'position' ) ; // =&gt; {left: 15, top: 30, height: 20} // Get caret offset $ ( '#...

    caret-right-small.eps

    caret-right-small.eps

    CaretPluginDemo:Caret 插件的简单 Hello World 示例

    插入符号设置您还需要在 Caret 的设置中更改两个 JSON 文件。 在 Settings &gt; External Commands 下,将打开一个名为 api.json 的文件。 添加以下代码。 “sampleMessage”示例已经存在。 如果你把它留在那里而不是...

    meteor-caretjs:Caret.js 的 Meteor 包

    用于 Meteor 的 #Caret.js ##描述 从输入器获取插入符号位置或偏移量 ##用法 目前这只是将库添加到页面。 有关更多详细信息,请参阅 。 // Get caret position $('#inputor').caret('position'); // =&gt; {...

    sciblox一个类似于PythonCARET数据科学软件包

    在数据挖掘方面,Sciblox可能包含了一些实用的算法,比如聚类分析、关联规则学习等,这些可以帮助用户发现数据中的隐藏结构。数据挖掘是发现未知模式的过程,对于发现有价值的信息和知识至关重要。 在机器学习部分...

    jquery.caret:jQuery插件来操纵输入和textarea元素的插入符位置和选择范围

    选择/取消选择任何元素中的所有文本 原料药 脱字号 $.fn.caret() 在单个点上询问并操纵输入字段的光标位置,而无需选择任何文本。 .caret()返回Number 获取第一个匹配元素的光标位置。 如果选择一个或多个字符,则...

    Caret-position:在 inputtextarea 元素上获取和设置用户的插入符号选择

    插入位置获取并设置用户在输入或文本区域上的文本选择。 有关示例用法,请参见 test.html。应用程序接口 // Set caret position after the first charactercaretPosition . set ( input , 1 )caretPosition . get ( ...

    word-at-caret:在插入符号处获取单词

    获取插入符号中的单词。 安装 使用安装: $ component install matthewmueller/word-at-caret 例子 var sel = window . getSelection ( ) var range = word ( sel . focusNode , sel . focusOffset ) range . ...

    Building Predictive Models in R Using the caret Package

    Building Predictive Models in R Using the caret Package

    jQuery仿新浪微博@功能代码

    【jQuery仿新浪微博@功能代码】是一种常见的前端交互设计,它基于JavaScript库jQuery实现,用于在网页文本输入框中实现类似新浪微博的“@”提及功能。这个功能的主要目的是提高用户在社交媒体或评论系统中的互动体验...

Global site tag (gtag.js) - Google Analytics