动态字体大小 Flex 4 在调整窗口/面板大小时调整大小

Question

我有一个 Flex 自定义 BorderContainer 组件，其中包含文本。如果我要将其添加到面板内的主应用程序中，则由于文本的大小是固定的，BorderContainer 会超出面板的宽度范围。我将其所有组件都设置为百分比，以便在缩小时重新调整大小，但是包含复选框和标签（很多带有文本的内容）的部分会混乱，因为字体大小不会改变。

我非常肯定我正在寻找的结果可以通过嵌入字体来完成，尽管我无法从网上找到解决方案。我尝试使用 CSS 样式来做到这一点，因为我将在许多不同的组件中使用它（我不想直接在 Flex 代码中更改它）。

编辑解决方案：

我尝试使用www0z0k建议的比例，但当它快速调整大小或调整到小屏幕时，它会导致一些严重的问题（该组件不会正确地重新调整大小，因为它乘以比率。最终似乎对我有用并且没有引起任何问题的是我运行了代码并找到了宽度（1152）和高度。 然后，我创建了一个 widthX = 1152 和 heightY =

842 的 const 变量，并在 onResize() 函数中对调整大小进行了编码：
（其中 BottomGroup 是我尝试调整大小的 borderContainer 的 id）

bottomGroup.scaleX = width / widthX;;
bottomGroup.scaleY = height / heightY;

END EDIT

到目前为止，我已经在 并尝试删除 fontSize 的任何声明，但这似乎不起作用。

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    @font-face {
        src: url("fonts\Arial.ttf");
        fontFamily: myFontFamily;
        color: black;
        fontStyle: normal;
        fontWeight: normal;
        advancedAntiAliasing: false;
    }

    s|BorderContainer {
        fontFamily: myFontFamily;
    }   
</fx:Style>

如果有人有任何建议或知道我哪里出了问题，任何帮助将不胜感激。谢谢。

编辑：一个示例应用程序显示我的问题是什么。
CustomContainer.mxml <代码>

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup>
    <s:Label text="This is a label" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
</s:HGroup>

<代码>

Main.mxml
<代码>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:local="*"
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    @font-face {
        src: url("fonts\Arial.ttf");
        fontFamily: myFontFamily;
        color: black;
        fontStyle: normal;
        fontWeight: normal;
        advancedAntiAliasing: false;
    }

    s|BorderContainer {
        fontFamily: myFontFamily;
    }   
</fx:Style>
<s:Panel title="BorderContainer Component Example"
         width="75%" height="75%" 
         horizontalCenter="0" verticalCenter="0"> 

    <local:container>

    </local:container>

</s:Panel>

<代码>

我希望能够调整字体大小以适应面板。我无法提供我正在处理的实际代码，但希望这个示例能够传达这个想法。

Answer 1

应该可以以类似的方式修改字体大小，但恕我直言，如果您有除文本之外的其他内容（您提到了复选框），您应该使用以下内容：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" resize="onResize();">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[

    private function onResize():void{
        var ratio:Number = width / measuredWidth;
        contentHolder.scaleX *= ratio;
        contentHolder.scaleY *= ratio;
    }

    ]]>
</fx:Script>

<s:HGroup id="contentHolder">
    <s:Label text="This is a label" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
</s:HGroup>
</s:BorderContainer>

Main.xml不需要修改

Answer 2

如果您在 BorderContainer 中的标签上设置显式宽度（例如 100%），它们应该会自动为您换行（请参阅：标签文档）。

如果您想实际更改字体大小（我会避免这样做，因为它会在视觉上造成混乱，但这是另一个讨论）您应该能够更改标签的scaleX和scaleY属性，以便它们能够缩放以完美贴合在边界容器中。您需要做的就是计算比例并应用它。