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

Question

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

我很肯定我想要的结果可以通过嵌入字体来完成，尽管我还无法从在线上提出解决方案。 我尝试使用CSS样式执行此操作，因为我将把它用于许多不同的组件（我不只是想直接在flex代码中更改它）。

编辑解决方案：

我试图按照www0z0k建议使用比例，但是当它快速调整大小或缩小到小屏幕时，它引起了一些严重的问题（组件无法正确调整大小，因为它乘以该比例。最终似乎有了为我工作，并没有问题是我运行代码并找到了容器的width （1152）和height （842）。

然后，我创建了一个widthX = 1152和heightY = 842的const变量，并且在onResize（）函数中，我对调整大小进行了编码，如下所示：
（其中bottomGroup是我要调整大小的borderContainer的id ）

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

结束编辑

到目前为止，我已经找到了一些在<fx:Style>中嵌入字体的示例，并尝试删除了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 (eg, 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的Labels上设置了显式宽度（例如100％），则它们应自动为您进行换行（请参见： Label docs ）。

如果您想实际更改字体大小（并且我会避免这样做，因为这会在视觉上造成混淆，但这是另一个讨论），您应该能够更改Labels的scaleX和scaleY属性，以便将它们缩放到合适的大小。在BorderContainer中。 您需要做的就是计算比例并应用它。