在 Flex 移动应用程序中使用 FXG 图形适用于 MXML，但不适用于 ActionScript答案

【问题标题】：Using FXG graphic in a Flex mobile app works with MXML, but not with ActionScript在 Flex 移动应用程序中使用 FXG 图形适用于 MXML，但不适用于 ActionScript
【发布时间】：2012-04-09 13:12:26
【问题描述】：

我已经阅读了 Adobe 的文档 Using FXG 和 Embedding application assets，但只能通过 MXML 嵌入 FXG -

MyStars.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Home">
</s:ViewNavigatorApplication>

Home.mxml（通过 MXML 嵌入 FXG 时可以正常工作）：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <comps:Star />
</s:View>

Star.fxg（位于 src/assets/Star.fxg）：

<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">    
    <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
        <fxg:fill>
            <fxg:SolidColor color="#FFFFFF"/>
        </fxg:fill>
        <fxg:stroke>
            <fxg:SolidColorStroke 
                caps="none" 
                color="#4769C4" 
                joints="miter" 
                miterLimit="4" 
                weight="20"/>
        </fxg:stroke>
    </fxg:Path>
</fxg:Graphic>

当我尝试通过 ActionScript 实例化 FXG 图形时（仍在同一个 Flex 移动项目中），我收到编译错误：

Call to a possibly undefined method Star

Home.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            private static const STAR:SpriteVisualElement = new Star();
        ]]>
    </fx:Script>  

<s:BitmapImage source="{STAR}" />
</s:View>

我也尝试过 import comps; 和/或 new comps.Star();

当我将 FXG 文件移动到 src/ 并使用 xmlns:comps="*" 时，一切正常。

【问题讨论】：

标签： apache-flex flex4.5 flex-mobile flex4.6 fxg

【解决方案1】：

在 ActionScript 中导入 Star，根据您的代码，我假设它是这样的：

import assets.Star
private static const STAR:SpriteVisualElement = new Star();

我怀疑这将摆脱编译器错误。但是，我不确定您是否可以使用 SpriteVisualElement 作为 BitmapImage 的源。您可能需要将 SpriteVisualElement 添加为父容器的子容器，并使用 Flex 组件生命周期来执行此操作。

我已经围绕这个做了一些实验，只是contributed this code to Apache Flex。 The specific class is here。虽然，出于某种原因，我错过了 FXG 元素可能是 SpriteVisualElements 的事实。如果您在 ActionScript 中创建组件，使用我的 FXGImage 类不会免除您必须在 ActionScript 中调整组件大小和位置的责任。

【讨论】：

"导入资产.Star;"效果很好，谢谢。 Image 和 BitmapImage 也可以将其作为 source=。不幸的是，当我设置 width 和 height 时，它们效果不佳，由于某种原因，缩放 FXG 文件效果不佳。
@AlexanderFarber 是不是图片没有缩放的问题？还是没有保持纵横比的问题？这是我的 FXGImage 组件的示例：flextras.com/labs/FlextrasFridayLunch/2012/FXGImage/…。您可以更改没有问题的高度和宽度。
好吧，你的 FXGImage 组件看起来好多了。 Image 和 BitmapImage 确实可以缩放，但看起来很糟糕。例如，当我在上面的应用程序中使用此代码时：

【解决方案2】：

对于 FXG 图形，请注意您的图稿尺寸。当您使用 FXG 创建对象时，图标周围的空白很重要。确保将图稿大小设置为图标的大小（图标周围没有多余的空白）。这样，当您嵌入到 bitmapImage 时，FXG 资源看起来会更好。

【讨论】：