2010-11-09 35 views
3

我正在构建一个小的Flex UI组件,它在文本标签旁边显示一个彩色方块。我希望能够为方块指定尺寸,并在内部调整标签的属性,使线高与方块匹配,文本相对于方块垂直居中。在Flex中,如何调整字体大小以将标签与图标对齐?

目前,我正在使用mx.controls.Label作为文本。将fontSize样式设置为正方形的尺寸不起作用,则标签变得太大。跟踪几个值的调试器后,我发现

  • 内部文本字段的行高度(通过getTextFieldMetircs()得到的TextFieldMetrics对象的ascentdescent特性的总和)似乎最终约120%我指定的字体大小。
  • 有一个默认的2个像素的“龙头”,我不能在Label水平直接改变,这增加了内部文本字段的总高度(getTextFieldMetrics().height
  • Label部件的高度,然后是一个额外的比那大5像素,我不知道那些从哪里来。

我目前的解决方案是将字体大小设置为Math.round((iconSize - 2)/1.2)但在这工作了OK十岁上下,似乎不尽人意。有没有更可靠,更直接的方法呢?

+0

你不能只是缩放你的标签,以适应广场,而不是试图找出字体大小? – 2010-11-09 14:59:26

+0

@Gregor - 我还没有尝试过。当你说缩放时,你的意思是'setActualSize'还是设置我认为我从'UIComponent'或'DisplayObject' API中记住的比例因子? (另外,您的评论可能应该发布为答案,否?) – 2010-11-09 15:23:46

+0

我的意思是设置scaleX和scaleY(您可能需要嵌入字体才能正常工作)http://help.adobe.com/en_US/FlashPlatform/ /reference/actionscript/3/mx/core/UIComponent.html#scaleX,我会告诉你什么。如果有效,我会将其添加为答案;) – 2010-11-09 17:12:55

回答

0

同时,我已经尝试了一点与使用UITextField代替Label,并导致我一个有趣的现象:这两个组件似乎做一些内部的比例,并根据字体大小调整,使呈现的文本会总是有一些填充。使用任一组件时,从getTextLineMetrics()返回的数字对于相同的字体大小而不同。

UITextField呈现文本,使得组件的总像素高度符合指定为fontSize的数字,这反过来使实际文本略小(约2-4像素)。而且,当您将leading设置为零时,它似乎忽略。

Label将所得线高度与指定为fontSize的线高度相匹配,从而使组件大于(约5个像素)。

虽然这对我来说确实很让人困惑,但我对使用Label组件并将其定位使顶部和底部的多余空白由父组件修剪并且无关紧要感到满意。文本的大小正确。我垂直居中,这很简单,但它也可以使用getTextLineMetrics()中的数字进行更复杂的定位。