Apache flex 根据spark.components.Label的内容调整其大小并查找其尺寸
我正在将Flash游戏移植到Flex 在最初的Flash游戏中，当玩家聊天时，我将该文本分配给一个文本字段（该字段的宽度为W=240和wordWrap=true，多行=true）。之后，我使用TextField的textHeight在其周围（及其下方）绘制一个矩形： 但在我的新Flex应用程序中，我不知道如何找到维度，以及如何使其随文本增长 这是我的测试用例，它并没有按预期工作（但它在FlashBuilderOK中运行） 有人有什么建议吗？我已经找了很多了 BubbleTest.mxml:Apache flex 根据spark.components.Label的内容调整其大小并查找其尺寸,apache-flex,flex4,label,flex4.5,autosize,Apache Flex,Flex4,Label,Flex4.5,Autosize,我正在将Flash游戏移植到Flex 在最初的Flash游戏中，当玩家聊天时，我将该文本分配给一个文本字段（该字段的宽度为W=240和wordWrap=true，多行=true）。之后，我使用TextField的textHeight在其周围（及其下方）绘制一个矩形： 但在我的新Flex应用程序中，我不知道如何找到维度，以及如何使其随文本增长 这是我的测试用例，它并没有按预期工作（但它在FlashBuilderOK中运行） 有人有什么建议吗？我已经找了很多了 BubbleTest.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:mx="library://ns.adobe.com/flex/mx"
xmlns:comps="*"
width="700" height="525" backgroundColor="#CCCCCC"
creationComplete="init()">
<fx:Script>
<![CDATA[
public function init():void {
_bubble0.text = 'Hello world';
}
]]>
</fx:Script>
<s:Rect id="_user0" horizontalCenter="0" y="340" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<s:Rect id="_user1" left="4" top="4" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<s:Rect id="_user2" right="4" top="4" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<comps:Bubble id="_bubble0" x="20" y="340" />
<comps:Bubble id="_bubble1" left="170" top="4" />
<comps:Bubble id="_bubble2" right="170" top="4" />
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
public static const W:uint = 240;
private static const R:uint = 6;
private static const PAD:uint = 4;
private static const BGCOLOR:uint = 0xCCFFCC;
private var _timer:Timer = new Timer(500, 20);
public function init(event:FlexEvent):void {
_timer.addEventListener(TimerEvent.TIMER, fadeBubble);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
addEventListener(MouseEvent.CLICK, hideBubble);
if (x > 100 && x < 200) {
_left.visible = true;
_right.visible = false;
} else {
_left.visible = false;
_right.visible = true;
}
}
public function set text(str:String):void {
_text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000);
_text.text = str;
// XXX resize _rect here, but how?
_timer.reset();
_timer.start();
}
public function get text():String {
return _text.text;
}
private function fadeBubble(event:TimerEvent):void {
if (_timer.currentCount * 2 > _timer.repeatCount)
alpha /= 2;
}
public function hideBubble(event:MouseEvent):void {
visible = false;
_timer.stop();
}
]]>
</fx:Script>
<s:Graphic id="_right" x="{W}" y="0">
<s:Path data="L 0 10
L 20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Graphic id="_left" x="0" y="0">
<s:Path data="L 0 10
L -20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Rect id="_rect" x="0" y="0" width="{W}" height="120" radiusX="{R}" radiusY="{R}">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Rect>
<s:Label id="_text" x="0" y="75" width="{W}" fontSize="16" textAlign="center" />
</s:Group>
但也许还有更多无痛的方式？如果使用flex，您必须稍微改变一下对布局的思考方式。您要做的是将矩形设置为基于百分比的宽度，并将绝对宽度设置为零。这允许布局做的是所谓的“大小到内容”的意思，它的宽度将由它的子级决定。然后，使用基于百分比的宽度的项目将查看该值并进行布局。有点难以用文字解释，所以我在这里粘贴了新的Bubble.mxml供您查看。它可能不是你想要的确切外观，但这应该让你开始，只需要稍微调整一下就可以得到你想要的样子
<?xml version="1.0" encoding="utf-8"?>
100&&x<200）{
_left.visible=true；
_right.visible=false；
}否则{
_left.visible=false；
_right.visible=true；
}
}
公共函数集文本（str:String）：无效{
//_text.setStyle（'color'，Util.isRed（str）？0xFF0000:0x000000）；
_text.text=str；
//XXX在这里调整大小，但如何调整？
_timer.reset（）；
_timer.start（）；
}
公共函数get text（）：String{
返回_text.text；
}
私有函数fadeBubble（事件：TimerEvent）：无效{
如果（_timer.currentCount*2>_timer.repeatCount）
α/=2；
}
公共函数隐藏气泡（事件：MouseEvent）：无效{
可见=假；
_timer.stop（）；
}
]]>
谢谢你，格雷格，我明白你的意思。我唯一的问题是像“是”和“否”这样的字符串太短。在我的Flash程序中，我使用TextField.textWidth，但在Flex-？？？中，这不重要，但可能是您正在使用默认的minWidth设置。在spark标签上，尝试将minWidth设置为0。
import mx.core.mx_internal;
use namespace mx_internal;
// XXX and then?
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
//public static const W:uint = 240;
private static const R:uint = 6;
private static const PAD:uint = 4;
private static const BGCOLOR:uint = 0xCCFFCC;
private var _timer:Timer = new Timer(500, 20);
public function init(event:FlexEvent):void {
_timer.addEventListener(TimerEvent.TIMER, fadeBubble);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
addEventListener(MouseEvent.CLICK, hideBubble);
if (x > 100 && x < 200) {
_left.visible = true;
_right.visible = false;
} else {
_left.visible = false;
_right.visible = true;
}
}
public function set text(str:String):void {
//_text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000);
_text.text = str;
// XXX resize _rect here, but how?
_timer.reset();
_timer.start();
}
public function get text():String {
return _text.text;
}
private function fadeBubble(event:TimerEvent):void {
if (_timer.currentCount * 2 > _timer.repeatCount)
alpha /= 2;
}
public function hideBubble(event:MouseEvent):void {
visible = false;
_timer.stop();
}
]]>
</fx:Script>
<s:Graphic id="_right">
<s:Path data="L 0 10
L 20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Graphic id="_left" x="0" y="0">
<s:Path data="L 0 10
L -20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Rect id="_rect" x="0" y="0" width="100%" height="100%" radiusX="{R}" radiusY="{R}">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Rect>
<s:Label id="_text" x="0" paddingTop="5" paddingBottom="5" fontSize="16" textAlign="center" />