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

djyamato · 05.08.2012, 17:16

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

Код AS3:

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

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

alatar · 05.08.2012, 17:30

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

djyamato · 05.08.2012, 17:57

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

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

alatar · 05.08.2012, 18:07

Код AS3:

personRightImage.width

Ну или

Код AS3:

personRightImage.getLayoutBoundsWidth()

В данном случае, как больше нравится.

djyamato · 05.08.2012, 18:11

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

alatar · 05.08.2012, 18:18

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

djyamato · 05.08.2012, 18:34

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

alatar · 05.08.2012, 18:41

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

djyamato · 05.08.2012, 21:10

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

Код AS3:

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" - левая слева, а правая приезжает влево

Код AS3:

<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 · 06.08.2012, 12:10

Код AS3:

<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 минут
Или так, если нужна анимация:

Код AS3:

<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>