About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Jan

    29

    Feathers TextArea 一些备注

    • 0 Comments
    • Flash Platform

    TextArea 在备注文本编辑器资料时基本已经全部备注,其它的基本属性与功能(一些自动化相关的功能与皮肤样式等功能)也与 TextInput 组件类似。只是它是一个支持多行编辑功能的文本组件,而且文本框内的文本格式(字体样式)是需要一致的。

    TextArea 支持特殊的文本编辑器,需要实现 ITextEditorViewPort 接口。 默认的 TextArea 类的文本编辑器使用的是 TextFieldTextEditorViewPort 类(类似于 TextFieldTextEditor),它是通过 flash.text.TextField 来进行渲染的,因为传统的 TextField 是在原生舞台上,所以 skipUnchangedFrames 属性很可能会被禁用等。

    关于 skipUnchangedFrames 属性被禁用的资料请参看《skipUnchangedFrames 属性局限性》。

    另外就是它是带有滚动条的组件,滚动条的显示模式、交互功能、滚动策略与其它带有滚动条组件的备注资料是一致的,略。

    Jan

    29

    Feathers3 TextInput 一些备注

    • 0 Comments
    • Flash Platform

    TextInput 在备注文本编辑器资料时基本已经全部备注,只是 TextInput 除了文本编辑器部份外,还包含了一些自动化相关的功能与皮肤样式等功能。

    比如支持 prompt 功能:

    input.prompt = "Password";

    比如支持设置焦点与选择:

    input.setFocus();//程序化的获得焦点
    input.selectRange(0, input.text.length);//程序化的选择文本

    如果只是想简单的通过程序化的方式设置光标的位置,可以省略 selectRange()  第二参数:

    input.selectRange(0);

    TextInput 支持大量的类似 FLEX 框架中 TextInput 组件事件,如 Event.CHANGE、FeathersEventType.FOCUS_IN、FeathersEventType.FOCUS_OUT、FeathersEventType.ENTER 等事件。

    a、某些移动平台上 TextInput 组件可能并不会派发 FeathersEventType.ENTER 事件,具体取决于某些属性的值。这可能包括一些平台的默认值! 如果遇到此类问题,需要参考具体的“文本编辑器”的API文档,了解问题原因的限制和要求的完整详情。

    b、既便没有启用焦点管理器,TextInput 也会派发 FeathersEventType.FOCUS_IN、FeathersEventType.FOCUS_OUT 事件。

    maxChars 属性可以限制最大的输入字符数量;restrict 可以限制输入的字符。

    TextInput 可以设置多个状态的字体样式,如:fontStyles、disabledFontStyles、promptFontStyles、promptDisabledFontStyles 等。

    甚至可以自定义用户每个输入状态的字体样式,如:

    input.setFontStylesForState( TextInputState.ERROR,new TextFormat( "Helvetica"20, 0xcc0000 ) );

    当 TextInput  显示 errorString 属性时,会自动进入 TextInputState.ERROR 状态设置的文本样式。

    如果没有为某个状态设置字体样式,那么就会显示为默认的 fontStyles,比如一般我们没有设置 TextInputState.FOCUSED 状态的字体样式,所以显示的就是默认的 fontStyles。

    但是当 TextInput 获得焦点的时候,我们有可能会更改它的背景纹理。可以通过 setSkinForState() 方法实现,比如:

    var disabledSkin:ImageSkin = new ImageSkin( disabledTexture );
    input.scale9Grid = new Rectangle( 42210 );
    input.setSkinForState( TextInputState.DISABLED, disabledSkin );

    可以为 TextInput 添加一个图标(icon)。 可以为每个文本输入的状态定制图标(就像背景皮肤一样),比如,传递一个 starling.display.Image 对象:

    input.defaultIcon = new Image( iconTexture );

    如果只是简单的这样设置,这个默认的图标(defaultIcon)会在每个不同的状态都显示,如果想为单独的状态设置不同的图标,可以通过 setIconForState() 方法实现。

    TextInput 有一些常见的布局属性,如 paddingTop、paddingRight、paddingBottom、paddingLeft、padding 等。

    另一个比较有用的与布局有关的属性是 typicalText 。默认情况下,TextInput 的尺寸不会以输入的文本为尺寸进行计算,而是根据背景皮肤,填充和其他布局属性进行计算出来的。但有时候我们会需要根据文本的内容来显示对应尺寸的 TextInput ,比如一个 NumericStepper 组件,根据最大的可能的字符串来显示文本区域的尺寸可能是最合适的。

    Jan

    29

    TextFieldTextEditor 类使用 flash.text.TextField 渲染文本,基于软加速的。即可以使用设备字体也可以使用嵌入字体(TTF 或 OTF 格式)。将 TextField 对象的 type 属性设为 TextFieldType.INPUT。

    当 TextInput 获得焦点时,TextField 实例将显示在其他Starling内容上方的经典显示列表中,当失去焦点的时候,TextField 将被绘制到一个 BitmapData 对象并转换为 Starling 显示对象的纹理快照。这份快照可以添加到滚动容器,并且当没有焦点的时候可以被正确的裁切(失去焦点的时候 TextField 对象会自动 从原生舞台移除)。

    优缺点:

    传统原生的 TextField 对象可以使用设备字体,对于有许多字符的字体而言(如汉字),嵌入字体会使用大量的内存,使用设备字体可能是最佳选择。

    当TextInput 获得焦点时,此文本编辑器会在 Starling 上方的原生舞台层显示一个传统的 TextField 对象。失去焦点时 TextInput 对象可能本身显示在其它 Starling 对象的下面。一般来说,这种情况不会经常发生(除非开发者的布局设计本身有能是有问题的)。

    每段矢量文本都会被 draw 到 BitmapData 对象,再转换成 Starling 需要的纹理格式后提交到 GPU 使用。因此,当屏幕中有多个 TextFieldTextEditor 实例时,经常性的更改文本内容,可能会导致性能问题。

    flash.text.TextField 有时候性能会好于 Flash Text Engine,但这种性能差异可以忽略的。

    相对而言,TextFieldTextEditor 在移动设备上提供了比 StageTextTextEditor 稍微少一点的本地体验,高级功能类似复制 / 粘贴可能并不适合所有平台。TextFieldTextEditor 比较适合的情况是需要用到嵌入字体的时候。

    TextFieldTextEditor 对从右向左排版的语言文字和双向排版的语言文字支持功能比较有限,有时候可能无法正常显示。对这些语言推荐使用 StageText 或 Flash Text Engine。

    高级字体样式:

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同,只是文本渲染器是通过 labelFactory 属性设置的,而文本编辑器是通过 textEditorFactory 属性设置的。

    一个文本渲染器的父组件有多个状态,如何更改它的高级字体样式: 

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同。

    使用嵌入字体:

    该部份备注资料基本与《TextFieldTextRenderer 一些备注》相同。

    Jan

    28

    BitmapFontTextEditor 渲染文本时使用的是位图字体(bitmap fonts),这个文本编辑器与 Starling 是“深度整合”的,这意味着当文本编辑器获得焦点时,不会像 StageTextTextEditor 那样出现“叠加”效果。

    优缺点:

    由于 Adobe AIR 运行时功能限制,此文本编辑器不能在移动设备上使用。当文本编辑器获得焦点时, Adobe AIR 在 iOS 系上不会提供软键盘。此文本编辑器应该只用于桌面应用开发。

    位图字体的每个字符轮廓会变成纹理集中的子纹理,子纹理逐个的排列显示以组成单词和段落,如果文本具有特别风格化的外观(例如渐变和轮廓),位图字体能提供最佳性能,因为样式可以在设计时就完成,而不需要运行时动态生成消耗性能与内存。

    英语只有 26 个字母(除了一些需要用到的标点或其它特定的字符),一些语言可能需要成百上千,比如说中文……由于 GPU 纹理尺寸限制,除了使用其它文本渲染器外,就别无选择了。

    位图字体是可以被缩放的,但一般中人推荐缩小(因为放大模糊会比缩小模糊的更快)。可能会失去文本的细节,在较小号的字体时使用矢量字体有更好的清晰度,文字清晰了就更易于阅读。对相同字体但不同字号的情况,通常是制作多份字体的纹理集,但这会需要更多的内存。

    在同一个位图文本渲染器中,不支持多种字体样式(即一个字符只对应一个字符的轮廓图形)。

    高级字体样式:

    该部份备注资料基本与《BitmapFontTextRenderer 一些备注》相同,只是文本渲染器是通过 labelFactory 属性设置的,而文本编辑器是通过 textEditorFactory 属性设置的。

    一个文本渲染器的父组件有多个状态,如何更改它的高级字体样式:

    该部份备注资料基本与《BitmapFontTextRenderer 一些备注》相同。

    Jan

    27

    TextBlockTextEditor 使用 Flash Text Engine 显示文本,这是一个基于软加速的矢量字体渲染器,具有许多高级功能。可以使用设备字体或嵌入的字体(TTF 或 OTF 格式)。flash.text.engine.TextBlock 被 draw 到一个 BitmapData 对象,然后转换成 Starling 纹理图提交到 GPU 。这个文本编辑器与 Starling 是“深度整合”的,这意味着当文本编辑器聚焦时,不会像 StageTextTextEditor 那样出现“叠加”效果。

    (有一个“快照”的概念:这个快照大概意思是基于软加速的矢量文本,即使没有出现在原生舞台的显示列表上,也一样可以被 draw,然后 BitmapData 会直接转成 Starling 所需要的纹理格式上传至 GPU 更新文本编辑器的纹理,这是深度整合的原理,我猜的,你猜我猜的对不对?

    优缺点:

    Flash Text Engine 可以使用设备字体显示文本,对某些具有很多字符轮廓的语言(如中文),当嵌入字体需要太多内存时,设备字体就可能成了唯一的选择。Flash Text Engine 可以很好的支持从右向左排版的文字或双向文字,而 flash.text.TextField 就有可以无法正常显示。

    由于 Adobe AIR 运行时的功能限制,此文本编辑器不能在移动设备上使用。当文本对象获取焦点时,Adobe AIR 没有提供 API 可以调用 iOS 的软键盘功能,此文本编辑器仅适用于桌面应用开发。

    更改基于矢量的文本对象比使用位图字体要慢,因为矢量内容需要被 draw 到一个 BitmapData 对象,然后提交到 GPU 才能成为 Starling 显示的纹理图。如果用户输入较长的文本内容,在性能比较低的设备上转换成为纹理图、并上传纹理到 GPU 的时间可能会成为性能瓶颈。

    因为每段矢量文本需要被绘制到 BitmapData 对象,每个独立的渲染器在 GPU 上都需要一份单独的纹理图。如果在同一个屏幕上有多个 TextBlockTextEditor 实例,过的状态改变或 Starling 的渲染 / 绘制请求,可能会影响性能。

    Flash Text Engine 有时可能会比 flash.text.TextField 渲染的慢一些,一般来说,这种性能差异是可以忽略的,并且 FTE 引擎提供的更高级功能通常比牺牲一点点性能更划算。

    高级字体样式:

    该部份备注资料直接参考《TextBlockTextRenderer 一些备注》(是一样的)。

    一个文本渲染器的父组件有多个状态,如何更改它的高级字体样式:

    该部份备注资料直接参考《TextBlockTextRenderer 一些备注》(是一样的)。

    使用嵌入字体:

    该部份备注资料直接参考《TextBlockTextRenderer 一些备注》(是一样的)。

    Jan

    27

    StageTextTextEditor  通过 flash.text.StageText 对象渲染文本,StageText 已经为 iOS 与 Android 移动设备进行了优化,可以使用移动设备的本机文本输入功能。StageText 支持本机原生的复制 / 粘贴,自动更正,自动完成,文本选择和其他高级文本输入功能。

    当 TextInput 组件获得焦点时,StageText 实例就会出现在 Starling 层上面,当失去焦点的时候,文本框就会被 draw 到一个 BitmapData 对象,然后转换成为 Starling 需要的纹理格式,再提交到 GPU。TextInput 允许被添加到滚动容器中,因为最终显示的只是一个 Starling 显示对象,所以是可以被剪裁的。

    优缺点:

    StageTextTextEditor 使用设备字体,对某些具有很多字符轮廓的语言(如中文),当嵌入字体需要太多内存时,设备字体就可能成了唯一的选择。没有正式支持嵌入字体的功能,如果要在移动设备上使用嵌入字体的功能需使用 TextFieldTextEditor 。

    StageTextTextEditor 可以用于桌面应用开发,但在桌面上建义使用其它文本编辑器,因为其它的文本编辑器可以提供更多的功能和版式需求。StageText  在每个平台上的可用的功能和行为并不相同,具体的参考 API 手册

    当文本编辑器获得焦点时,StageText 实例就会出现,因为在 Starling 层上面,所以既便当失去焦点时,TextInput 组件是在其它组件的下面,只要获得焦点,这个 StageText 实例就一定会在所有 Starling 内容的上面。一般来说,这种情况不会经常发生(除非开发者的布局设计本身有能是有问题的)。

    每段矢量文本都会被 draw 到 BitmapData 对象,然后转换成为 Starling 需要的纹理格式,再提交到 GPU。因此,当屏幕中有多个 StageTextTextEditor 实例时,经常性的更改文本内容,可能会导致性能问题。

    高级字体样式:

    通常,是对一个文本渲染器的父组件使用 starling.text.TextFormat 类设置文本样式,例如设置一个 TextInput 的文本样式:

    input.fontStyles = new TextFormat( "Helvetica"20, 0xcc0000 );

    但是 starling.text.TextFormat 并不能设置文本编辑器的所有字体样式。如果想要进行高级的字体样式设置,可以参考下面的资料。以 TextInput 组件为例,设置 textEditorFactory 属性: 

    var input:TextInput = new TextInput();
    input.textEditorFactory = function():ITextEditor
    {
        var textEditor:StageTextTextEditor = new StageTextTextEditor();
        //为避免与主题文件中默认设置的样式冲突,先删除 styleProvider 提供的样式
        //textEditorFactory 会先执行,然后再执行主题文件中的代码,styleProvider 设为null 后,可以避免被覆盖
        textEditor.styleProvider = null;
        //设置高级字体样式
        return textEditor;
    };

    文本编辑器的高级字体样式设置可以是 fontFamily、fontSize、color 等属性,如: 

    textEditor.fontFamily = "Arial";
    textEditor.fontSize = 16;
    textEditor.color = 0xcccccc;

    StageTextTextEditor 还有其它更多的属性可以设置,具体的参考 API 手册

    Jan

    27

    Adobe Flash运行时提供了多种方式来编辑文本,并且有多种不同的方法在 GPU 上渲染文本,但并没有一最佳的方式,所以允许开发者自行根据需要选择最适合的“文本编辑器”(text editors)。在选择不同的文本编辑器时应考虑以下几个因素:

    1、应用是运行在移动设备上或桌面设备上。
    2、是否需要嵌入字体。
    3、使用是什么样的语言。

     这些因素会涉及到性能与内存的使用量,具体取决于选择的文本编辑器。

    Feathers 提供了 4 种不同的文本编辑器

    1、StageTextTextEditor :它使用的是 flash.text.StageText 对象,StageText  使用的是本机支持的原生文本输入,所以适用于所有平台,特别是在移动设备上。当一个文本输入框获得焦点时,StageText  就会显示在 Starling 层的上面。当文本框失去焦点的时候,文本框就会被 draw 到一个 BitmapData 对象,然后提交到 GPU 成为 Starling 显示的纹理图。

    2、TextFieldTextEditor :它使用的是 flash.text.TextField 对象,TextField 原生舞台对象,适用于所有平台。当一个文本输入框获得焦点时,TextField 就会显示在 Starling 层的上面。当文本框失去焦点的时候,文本框就会被 draw 到一个 BitmapData 对象,然后提交到 GPU 成为 Starling 显示的纹理图。

    3、TextBlockTextEditor :它使用的是 FTE 文本引擎(Flash Text Engine)是软渲染的,然后将结果 draw 到一个 BitmapData 对象,然后提交到 GPU 成为 Starling 显示的纹理图。此文本编辑器与移动应用不兼容(只能用于桌面 APP 开发)。

    4、BitmapFontTextEditor :它使用的是位图字体,每个字符对应的是一个独立的矩形子纹理图,通过 Image 对象显示的。此文本编辑器与移动应用不兼容(只能用于桌面 APP 开发)。

    每个文本编辑器都有不同的功能,所以一定要仔细区分,选择一个最佳的文本编辑器应用到开发中。

    默认的文本编辑器:

    通常情况下,应用程序中的大多数文本输入组件将使用相同类型的文本编辑器。为避免重复的在每个组件中单独设置文本编辑器,可以先设置一个全局的文本编辑器告诉所有组件默认情况下使用某种文本编辑器。只有当遇到某个组件不需要默认的文本编辑器时,才给它传递入特殊的文本编辑器,覆盖默认的类型。

    如果未经手动修改过,默认情况下会使用 StageTextTextEditor 对象,StageTextTextEditor 在移动开发时比较合适(它也能在桌面开发应用时良好的运行)。当使用主题文件时(theme),应该检查默认的文本编辑器。主题文件中通常会嵌入一种自定义字体,可能用于为了保持风格一体化或风格特殊化。

    当一个组件没有单独设置文本编辑器的时候,它会调用 FeathersControl.defaultTextEditorFactory() 方法。FeathersControl.defaultTextEditorFactory 是一个静态变量,可以根据需要任意的更改为不同的函数,默认它就是这样子:

    function():ITextEditor
    {
        return new StageTextTextEditor();
    }

     根据需要,也可以更改为 TextFieldTextEditor 作为默认的文本编辑器:

    FeathersControl.defaultTextEditorFactory = function():ITextEditor
    {
        return new TextFieldTextEditor();
    };

    在单个组件上使用不同的文本编辑器:

    可以给特定的组件指定特殊的文本编辑器,不使用(覆盖)默认的文本编辑器,比如一个 TextInput 对象:

    input.textEditorFactory = function():ITextEditor
    {
        return new TextFieldTextEditor();
    }

    甚至可以在返回文本编辑器之前,对文本编辑器设置字体相关的高级选项:

    input.textEditorFactory = function():ITextEditor
    {
        var textEditor:TextFieldTextEditor = new TextFieldTextEditor();
        textEditor.antiAliasType = AntiAliasType.NORMAL;
        textEditor.gridFitType = GridFitType.SUBPIXEL;
        return textEditor;
    }

    如果正在使用主题文件进行开发,需要小心:当对单个组件设置 textEditorFactory 属性时,可能被主题文件中的样式覆盖,因为主题文件中样式的使用是在单个组件设置 textEditorFactory 之后。可以在设置 textEditorFactory 属性时,对单个组件的自定义的文本编辑器的 styleProvider 属性设置为 null,这样可以避免被主题文件中的代码覆盖。

    自定义文本编辑器:

    如果想不同的方法渲染文本,需要实现 ITextEditor 接口类。除非自定义的文本编辑器能直接在 GPU 上进行渲染,否则就需要像 StageTextTextEditor 或 TextFieldTextEditor 类一样需要“快照”,draw 到一个 BitmapData 对象后,再上传到 GPU。(因为Feathers是开源的,可以随时参考 StageTextTextEditor 或 TextFieldTextEditor 类的代码)。

    请注意:除非你在自定义时能找到一种比使用 StageText 或 TextField 更好的方法,否则你就会无法访问移动设备的本机软键盘。如果没有了软键盘,自定义的文本编辑器可能只适用于桌面应用(或者提供一个自定义的备用软键盘用于移动应用)。

    多行文本编辑器:

    在移动设备上,StageTextTextEditor 可以提供用于编辑多行的文本功能,只要将 multiline 属性设为 true 即可,底层被包装的 StageText 对象就会自动提供滚动功能。

    在进行桌面应用开发时,TextArea 可能被使用,必要时它也可以被用于移动开发,但只推荐将它使用在桌面应用开发时。

    TextArea 支持特殊的文本编辑器,需要实现 ITextEditorViewPort 接口。目前 Feathers 内置也提供了一个 TextFieldTextEditorViewPort 类,它是默认的 TextArea 类的文本编辑器,类似于 TextFieldTextEditor,它是通过 flash.text.TextField 来进行渲染的。

    Jan

    26

    如果那么多的内置布局类都无法满足你的需求,Feathers 容器也支持自定义布局。

    Introduction to custom Feathers layouts

    ILayoutDisplayObject and ILayoutData

    Creating virtualized custom Feathers layouts

    我认为在 Adobe 彻底抛弃 AS3 之前,我都不会用到它了……

    Jan

    26

    HorizontalSpinnerLayout 与 VerticalSpinnerLayout 布局使用方法基本一致,都是用于 SpinnerList 组件布局的,只是前者是水平横向布局的,后者是竖向垂直布局的。都提供了用于调整间距、边距、对齐的属性 API,支持虚拟化布局。

    Jan

    26

    Feathers3 ScrollText 一些备注

    • 0 Comments
    • Flash Platform

    ScrollText 的主要功能目的是为了显示大段的文字,当遇到大段大段的长文本时,TextBlockTextRenderer 与 TextFieldTextRenderer 将有可能需要太多的性能消耗与内存需求。BitmapFontTextRenderer 可能是一个不错的选择,但首先它要有足够多的字符对应的轮廓,一般来说英文不成问题,中文就会成问题; 另外更多的 BitmapFontTextRenderer 的缺点参考《BitmapFontTextRenderer 一些备注》。ScrollText 作为一种文本显示的备用方案,它在原生舞台上传统的显示列表中显示文本对象,ScrollText 的缺点概述参考《“文本渲染器” 一些概述备注》。

    var scrollText:ScrollText = new ScrollText();
    scrollText.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    this.addChild( scrollText );

    创建了一个 ScrollText 对象并添加到了 Starling 显示列表上,但这只是一个假象,实际上创建了一个 flash.text.TextField 对象添加到了原生舞台上(只是它通过自动计算将坐标匹配到 Starling 对象)。

    如果我们设置这个对象的 width 属性,它的 height 值会自动增加。如果同时设置宽与高,却它的高度小于文本的高度,ScrollText 的文本内容就会自动允许滚动。

    因为它是一个基于传统的原生 TextField 对象的包装,所以它能支持一个 HTML 标签的子集。其它大量的 TextField 的属性也能用于 ScrollText 对象上。如antiAliasType、backgroundColor、borderColor、gridFitType、styleSheet、sharpness、thickness 等等。完整的属性列表参考 API 手册

    其它滚动条相关的资料,如滚动策略、滚动条显示模式、交互模式等与其它组件的滚动条资料基本一致。