About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    4

    Feathers 3.1 “升级指南”一些备注

    • 0 Comments
    • Flash Platform
    • 发布:古树悬叶
    • 引用:0
    • 浏览:

    3.0 版本的项目升级到 3.1 的版本时,项目本身不需要进行修改(只是一个次要版本的升级)。但有一些简化的 API,提高开发人员的体验,特别是在处理字体样式和皮肤方面。

    用 starling.text.TextFormat 设置字体样式:

    从 Starling 2.0 开始,引入了 starling.text.TextFormat 类,它定义了所有类型文本使用的常见字体样式,包括位图字体和TTF / OTF字体。以前,要在 Feathers 文本渲染器上使用自定义字体样式,需要使用不同的类并设置不同的属性,具体取决于使用的文本渲染器。例如,TextBlockTextRenderer 具有类型为flash.text.engine.ElementFormat 的 elementFormat 属性,而 TextFieldTextRenderer 具有类型为 flash.text.TextFormat 的 textFormat 属性。现在,所有文本渲染器都有统一的方式来支持 starling.text.TextFormat 类。

    事实上,现在的字体样式不需要直接设置在文本渲染器对象本身上,开发者可以直接在使用到文本组件的对象上直接设置就可以,比如 Label、Button 这些组件用到了文本渲染器,就可以直接对这些父组件设置字体样式,父组件会自动将设置好的字体样式传递给文本渲染器。以 Label 组件为例:

    var label:Label = new Label();
    label.text = "Hello World";
    label.fontStyles = new TextFormat( "_sans", 20, 0xff0000 );
    this.addChild( label );

    就是如此简单。在绝大多数情况下,根本不需要通过文本渲染器工厂(text renderer factories)设置。

    如果想设置 Label 禁用时的字体样式,只需如下代码:

    label.disabledFontStyles = new TextFormat( "_sans", 20, 0x999999 );

    现在含有文本渲染器的绝大多数组件都包含了 fontStyles、disabledFontStyles 属性。如果一个组件是可选择的(类似“开关”),也会包含 selectedFontStyles 属性。

    如果组件包含有更多的状态,如 Button 组件,还包含了 setFontStylesForState() 方法用于设置不同状态字体的样式,此方法可以传入一个状态名称和一个用于设置字体样式的 TextFormat  对象,如下代码可以设置更多的状态时字体样式:

    var button:Button = new Button();
    button.setFontStylesForState( ButtonState.DOWN, new TextFormat( "_sans", 20, 0xffffff ) );
    button.setFontStylesForState( ButtonState.HOVER, new TextFormat( "_sans", 20, 0xff9999 ) );

    样式属性与主题:

    在以前的 Feathers 版本中,单独的皮肤设置经常会与主题文件中的代码产生“冲突”。为了避免这种问题,过去可能需要通过使用 AddOnFunctionStyleProvider 类,设置组件的 styleProvider 属性为 null,等待组件的初始化,或者需要扩展主题,但有时候可能仅仅只是需要一些微小的调整,所以这些方法无论是哪一种,都会显示麻烦一点。

    从 Feathers 3.1 开始, 一些属性现在被定义为“样式属性”。如果在主题之外设置样式属性,不需要再担心会被主题替换掉,而且还会同时保留主题文件中其它的皮肤设置(其它样式不会受到影响)。例如,如果在自定义的主题文件之外设置按钮的字体样式,但保持主题的背景皮肤,可以很容易:

    var button:Button = new Button();
    button.label = "Click Me";
    //不会再被主题文件中替换
    button.fontStyles = new TextFormat( "_sans", 20, 0xff0000 );
    this.addChild( button );

    如果想要知道 Button 类被单独分离出来的样式属性有哪些,可以查看 API 手册

    主题中的最小尺寸:

    如果在主题文件中设置了普通属性,那么依旧有可能与主题外的代码产生“冲突”。例如,不应该直接对主题中的组件本身设置 minWidth 和 minHeight 属性。这些属性不被视为“样式属性”,所以如果在主题外同时设置的话,就会产生冲突。

    //比如在主题内有如下代码
    private function setButtonStyles( button:Button ):void
    {
        button.defaultSkin = new ImageSkin( texture );
        button.minWidth = 40; //在主题内最好不要对组件本身设置这种普通属性
    }

    取而代之的是应该设置组件的皮肤:

    //在主题内
    private function setButtonStyles( button:Button ):void
    {
        var skin:ImageSkin = new ImageSkin( texture );
        skin.minWidth = 40;//对组件的皮肤进行设置
        skin.minHeight = 20;
        button.defaultSkin = backgroundSkin;
    }

    如果组件没有显示的尺寸设置,组件就会用皮肤的尺寸用于测量步骤。所以如上代码在皮肤上设置尺寸,实际上跟在组件上设置尺寸基本上是一样的。

    如果有些组件不需要显示皮肤,可以使用一个全透明的背景皮肤,可以简单地传入一个starling.display.Quad,设 alpha 属性设置为 0:

    var backgroundSkin:Quad = new Quad( 40, 20 );
    backgroundSkin.alpha = 0;
    component.backgroundSkin = backgroundSkin;

    Starling 不会要求 GPU 渲染一个完全透明的显示对象,因此这个透明背景不会增加 GPU 绘制调用的次数,也不会影响 GPU 绘制的性能。但这个 Quad 的尺寸会被视为测量步骤中的最小尺寸。

    当一个显示对象没有 minWidth 与 minHeight 属性时(如上面的 Quad),它的普通 width 与 height 属性也会被当作最小值。如果一定需要有 minWidth 与 minHeight 的值比普通的 width 与 height 属性值还要小,可以考虑使用 ImageSkin。

    • Tags:
    • 2017 / 2 / 4
    相关文章:
      Post Comment.

      发表评论