使用Zoom缩放，子元素Text出现换行，如何避免

[keanu196492]

在一个Canvas里面放一个Text，Text.width = 100%，文字较多，基本撑满一行，现在对Canvas做zoom操作（从小变大）

在zoom的过程中，由于Canvas变小了，所以text就出现先换行后恢复的情况

如: aaaaaabbbb -> aaaaa -> aaaaaabbbb
bbbb

效果上即使速度很快也会闪一下，请问如何解决，让字也跟着变大变小，从而不出现换行的情况。

[leemiki]

变大效果也给你贴上
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ResizeEvent;
import flash.events.MouseEvent;
[Bindable]
private var cavWidth:Number;

public function doZoom(event:MouseEvent):void {
if (zoomAll.isPlaying) {
zoomAll.reverse();
}
else {
zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
cav.width = cavWidth;
}
}

private function getSizeHnadler(event:ResizeEvent):void{
cavWidth = event.currentTarget.width;
}
]]>
</mx:Script>

<mx:Zoom id="zoomAll" zoomWidthTo="2" zoomHeightTo="2" zoomWidthFrom="1" zoomHeightFrom="1"/>
<mx:Panel width="100%" height="100%">
<mx:Canvas id="cav" rollOut="doZoom(event)" rollOver="doZoom(event)" width="250" resize="getSizeHnadler(event)" borderStyle="inset">
<mx:Text id="img" text="O(∩_∩)O哈哈~哈哈哈哈哈哈哈哈哈" fontSize="14" width="100%"/>
</mx:Canvas>
</mx:Panel>
</mx:Application>

[keanu196492]

原来是原始大小，zoom操作是从0.8 -> 1，在0。8的时候里面text就出现了换行的现象，到1的时候又好了。整个过程就会闪一下。

[leemiki]

那是Text或Canvas的width没设置好导致~~~

变大变小上面例子都有，你自己看吧！！

[leemiki]

[Quote=引用楼主 keanu196492 的回复:]
......现在对Canvas做zoom操作（从小变大）

在zoom的过程中，由于Canvas变小了，所以text就出现先换行后恢复的情况
......
[/Quote]
这两者不相矛盾？？到底是变大还变小？？

我试了下变小情况并未出现你说的情况~~~
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import flash.events.MouseEvent;

public function doZoom(event:MouseEvent):void {
if (zoomAll.isPlaying) {
zoomAll.reverse();
}
else {
zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
}
}
]]>
</mx:Script>

<mx:Zoom id="zoomAll" zoomWidthTo=".8" zoomHeightTo=".8" zoomWidthFrom="1" zoomHeightFrom="1"/>
<mx:Panel width="100%" height="100%">
<mx:Canvas rollOut="doZoom(event)" rollOver="doZoom(event)" width="175" borderStyle="inset">
<mx:Text id="img" text="O(∩_∩)O哈哈~哈哈哈哈" fontSize="14" width="100%"/>
</mx:Canvas>
</mx:Panel>
</mx:Application>

还有问题把测试代码贴出来~~~·