Как узнать ширину контента у BitmapImage если width=100% и horizontalAline="center"?

[djyamato]

Здравствуйте
Есть BitmapImage, которая растягивается на 100 процентов по высоте и ширине


<s:BitmapImage id="personRightImage"
source="@Embed(source='assets/personRight.png')"
horizontalAlign="right"
verticalAlign="middle"
height="100%"
width="100%"
scaleMode="letterbox"/>


Как мне узнать ширину картинки (контента) после того как она растянулась по ширине и высоте и отцентрировалась вправо ?

[alatar]

В каком смысле? width/height и будут ширина вашей картинки. То что вы в mxml написали как "100%" будет присвоено в percentWidth/percentHeight компонента. Конечные размеры станут известны после их расчета в layout или в updateDisplayList в вышестоящем компоненте.

[djyamato]

Ну, например есть:

Group width="100%" height="100%"
Внутри нее есть BitmapImage height="100%" horizontalAlign="right" verticalAlign="middle" scaleMode="letterbox"
После создания и получения сорса эта битмапа растянется по высоте на 100 процентов, отскейлит свой контент и я хочу получить значение ширины отскейленного контента

[alatar]

personRightImage.width
Ну или
personRightImage.getLayoutBoundsWidth()
В данном случае, как больше нравится.

[djyamato]

не те значения получаются
есть jpeg он по ширине 300 и по высоте 775
Есть группа размером, скажем 500 на 300
В нее положена BitmapImage c этим source (300x775)
Картинка сжалась, верно же ?
Ну а если трейсить width или getLayoutBoundsWidth() у BitmapImage эти значения равны 300 всегда

[alatar]

Ну так, если первоначальный, приведенный вами код верен, то ширина и будет 300. Вы же выставили width="100%" для BitmapImage.

[djyamato]

width=100% убрал, ширина в трэйсе так и осталась 300.
Ну а все же, даже есть и не убирать приравнивание ширины ко 100 процентам, как узнать ширину содержимого отскейленой BitmapData ?

[alatar]

Посмотрите measuredWidth/measuredHeight.

[djyamato]

нет, эти переменные возвращают 300 тоже
Сделал так:

package components
{
import spark.components.Image;

public class ExtendedImage extends Image
{
public function ExtendedImage()
{
super();
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
graphics.lineStyle(1,0xff0000,1);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
}

[Bindable(event="scaledWidthChanged")]
public function get scaledWidth():Number
{
var num:Number = this.width;

if (scaleMode == "letterbox")
{
try
{
if ( (width > 0) && (sourceWidth < sourceHeight) )
{
num = (sourceWidth/sourceHeight) * height;
}
}
catch(e:Error)
{
num = this.width;
}
}

return num;
}
}
}

Знать ширину растянутой картинки мне нужно было чтобы в разных стэйтах эти картинки прилипали или к правому краю экрана или к левому. То есть если стэйт "normal" -левая картинка слева, правая справа, если стэйт "leftPerson" - правая остается справа, левая приезжает к правому краю стэйджа, если стэйт "rightPerson" - левая слева, а правая приезжает влево


<s:states>
<s:State name="normal"/>
<s:State name="leftPerson"/>
<s:State name="rightPerson"/>
</s:states>

<fx:Script>
<![CDATA[

[Bindable]
protected var leftPersonX:Number=0;

[Bindable]
protected var rightPersonX:Number=0;

override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void
{
super.stateChanged(oldState, newState, recursive);
//leftPersonRight-=(personLeftImage.width-personLeftImage.scaledWidth);

try
{
switch(newState)
{
case "normal":
leftPersonX=0;
rightPersonX=stage.stageWidth-personRightImage.width;
break;
case "leftPerson":
personLeftImage.depth=1;
personRightImage.depth=0;
leftPersonX=stage.stageWidth-personLeftImage.scaledWidth;
rightPersonX=stage.stageWidth-personRightImage.width;
break;
case "rightPerson":
personLeftImage.depth=0;
personRightImage.depth=1;
leftPersonX=0;
rightPersonX=-Math.abs((personRightImage.scaledWidth-personRightImage.width));
break;
}
}
catch(error:Error)
{
}
trace(newState+" leftPersonX="+leftPersonX);
}
]]>
</fx:Script>


<s:Group width="100%" height="100%">
<components:ExtendedImage id="personLeftImage"
x="{leftPersonX}"
source="@Embed(source='assets/personLeft.png')"
horizontalAlign="left"
verticalAlign="middle"
height="100%"
scaleMode="letterbox"
moveEffect="Move"/>

<components:ExtendedImage id="personRightImage"
x="{rightPersonX}"
source="@Embed(source='assets/personRight.png')"
horizontalAlign="right"
verticalAlign="middle"
height="100%"
scaleMode="letterbox"
moveEffect="Move"/>
</s:Group>
<s:HGroup width="100%" bottom="0">
<s:Button label="left" click="{currentState='leftPerson'}"/>
<s:Button label="normal" click="{currentState='normal'}"/>
<s:Button label="right" click="{{currentState='rightPerson'}}"/>
</s:HGroup>

[alatar]

<s:states>
<s:State name="normal"/>
<s:State name="rightPerson"/>
<s:State name="leftPerson"/>
</s:states>

<s:Group width="100%" height="100%">
<s:Image id="leftImage"
height="100%"
width="100%"
horizontalAlign.normal="left"
horizontalAlign.rightPerson="left"
horizontalAlign.leftPerson="right"
depth.leftPerson="1"
depth.rightPerson="0"
source="@Embed(source='assets/personLeft.png')"/>
<s:Image id="rightImage"
height="100%"
width="100%"
horizontalAlign.normal="right"
horizontalAlign.leftPerson="right"
horizontalAlign.rightPerson="left"
depth.leftPerson="0"
depth.rightPerson="1"
source="@Embed(source='assets/personRight.png')"/>
</s:Group>

<s:HGroup
width="100%"
bottom="0">
<s:Button
label="left"
click="{currentState='leftPerson'}"/>
<s:Button
label="normal"
click="{currentState='normal'}"/>
<s:Button
label="right"
click="{{currentState='rightPerson'}}"/>
</s:HGroup>

Добавлено через 36 минут
Или так, если нужна анимация:
<s:states>
<s:State name="normal"/>
<s:State name="rightPerson"/>
<s:State name="leftPerson"/>
</s:states>

<s:transitions>
<s:Transition toState="normal">
<s:Sequence>
<s:SetAction target="{leftImage}" property="right"/>
<s:SetAction target="{rightImage}" property="left"/>
<s:Parallel>
<s:Move target="{leftImage}" xTo="0"/>
<s:Move target="{rightImage}" xTo="{container.width - rightImage.width}"/>
</s:Parallel>
<s:SetAction target="{leftImage}" property="left"/>
<s:SetAction target="{rightImage}" property="right"/>
</s:Sequence>
</s:Transition>
<s:Transition toState="leftPerson">
<s:Sequence>
<s:SetAction target="{leftImage}" property="left"/>
<s:SetAction target="{rightImage}" property="left"/>
<s:Parallel>
<s:Move target="{leftImage}" xTo="{container.width - leftImage.width}"/>
<s:Move target="{rightImage}" xTo="{container.width - rightImage.width}"/>
</s:Parallel>
<s:SetAction target="{leftImage}" property="right"/>
<s:SetAction target="{rightImage}" property="right"/>
</s:Sequence>
</s:Transition>
<s:Transition toState="rightPerson">
<s:Sequence>
<s:SetAction target="{leftImage}" property="right"/>
<s:SetAction target="{rightImage}" property="right"/>
<s:Parallel>
<s:Move target="{leftImage}" xTo="0"/>
<s:Move target="{rightImage}" xTo="0"/>
</s:Parallel>
<s:SetAction target="{leftImage}" property="left"/>
<s:SetAction target="{rightImage}" property="left"/>
</s:Sequence>
</s:Transition>
</s:transitions>

<s:Group id="container" width="100%" height="100%">
<s:Image id="leftImage"
height="100%"
left.normal="0"
left.rightPerson="0"
right.leftPerson="0"
depth.leftPerson="1"
depth.rightPerson="0"
source="@Embed(source='assets/personLeft.png')"/>
<s:Image id="rightImage"
height="100%"
right.normal="0"
right.leftPerson="0"
left.rightPerson="0"
depth.leftPerson="0"
depth.rightPerson="1"
source="@Embed(source='assets/personRight.png')"/>
</s:Group>