플렉스 모바일 크기 조정 된 이미지 레이아웃

플렉스 모바일 응용 프로그램에서 크기가 조정 된 이미지를 표시하려고하는데 제대로 표시되지 않았습니다. width = "100 %"로 설정하면 정상적으로 보입니다. (이미지 1) 플렉스 (scaleMode = "letterbox")로 30 %를 말하도록 스케일을 조정하면 크기가 축소되지만 이미지 위아래의 구성 요소는 Image 컨트롤과의 거리를 100으로 유지합니다 % 높이. (이미지 2)플렉스 모바일 크기 조정 된 이미지 레이아웃

autolayout = true에서 동적으로 조정 된 요소까지 수십 개의 레이아웃 트릭을 시도했지만 해결책을 찾지 못했습니다. 내가 도대체 뭘 잘못하고있는 겁니까?

(I은 64 비트 윈도우 7 시스템에서 플래시 빌더 4.7, 플렉스 4.6 및 AIR SDK 13.0을 사용합니다.) 이미지의 높이가 참으로 그대로 유지

Image 1 - 100% Image 2 - 30%

출처

2014-04-23 fmarton

이 답변 주셔서 감사합니다 정말 감사! 그러나 이것은 불행히도 해결책이 아닙니다. 높이를 너비와 동일하게 설정하기 때문입니다. 이 경우 두 레이블은 이미지에 더 가깝지만 갈 곳이 아닙니다.

그런데 경계 상자와 함께 이미지의 크기를 올바르게 조정할 수있는 방법을 찾을 수있었습니다. 주요 아이디어는 이미지를 컨테이너에 넣고 컨테이너 크기를 원본 이미지 크기로 나눈 비율에 따라 이미지 크기를 조정하는 것입니다.

그러면 이미지가 컨테이너를 완전히 채우고 컨테이너의 너비를 조정하여 원하는 배율을 설정할 수 있습니다. 여기

완벽하게 작동 내 코드이며, 정말 미래에 다른 사람을 도울 수 있기를 바랍니다 :

<?xml version="1.0" encoding="utf-8"?>

<fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 
     import spark.components.Image; 

     private var img:Image = new Image(); 

     private function init():void { 
      drawImg("assets/image.png");     
     } 

     private function drawImg(src:String):void { 
      img.source = src; 
      img.scaleMode = "letterbox"; 
      img.smooth = true; 
      imgHolder.addElement(img); 
      img.addEventListener(FlexEvent.READY, imgStatus); 

     } 

     private function imgStatus(e:FlexEvent):void { 
      var imgw:Number = e.currentTarget.bitmapData.width; 
      var imgh:Number = e.currentTarget.bitmapData.height; 
      var ratio:Number = Number(imgHolder.width/imgw); 
      img.width = imgw*ratio 
      img.height = imgh*ratio 
     } 

    ]]> 
</fx:Script> 

<s:VGroup width="100%" horizontalAlign="center"> 
    <s:Label text="Foo" /> 
    <s:HGroup id="imgHolder" width="30%" /> 
    <s:Label text="Bar" /> 
</s:VGroup>

먼저 내가 항상 널을 얻었다 객체이므로, 이미지를 완전히로드해야한다는 것을 알았으므로 이제는 완벽하게 작동합니다.

다시 원하는 너비 속성은 이미지가 아닌 컨테이너에서 설정할 수 있습니다.

다음은 결과가 표시된 스크린 샷입니다.

Solution

출처

2014-04-24 11:17:55 fmarton

단지를 설정하여 이미지 폭. 이미지 주위에 사각형을 그으면 같은 크기의 경계 상자가 항상 표시됩니다.

당신은 같은 코드를 수정할 수있는 동적 높이를 가지고 레이블이 원하는대로 위치하도록 다음,

<s:VGroup width="100%" 
      horizontalAlign="center"> 

    <s:Label verticalAlign="bottom" 
      text="Foo" /> 

    <s:Image id="img" 
      source="test.gif" 
      width="30%" 
      height="{img.width}" 
      scaleMode="letterbox" /> 

    <s:Label verticalAlign="top" 
      text="Bar" /> 

</s:VGroup>

출처

2014-04-24 08:10:21 Jan

플렉스 모바일 크기 조정 된 이미지 레이아웃

답변

관련 문제