2014-04-23 3 views
0

Я пытаюсь отобразить измененное изображение в гибком мобильном приложении, и я не мог правильно его отобразить. Если установлено значение width = "100%", это выглядит нормально. (Изображение 1) Когда я масштабирую его, скажем 30% от Flex (scaleMode = "почтовый ящик"), он уменьшен, но компоненты, расположенные выше и ниже изображения, все еще сохраняют расстояние от элемента управления Image как 100 % высота. (Изображение 2)Flex с измененным размером изображения макет

Я пробовал десятки макетов трюков от autolayout = true до динамически масштабированных элементов, но не смог найти решение. Что я делаю не так?

(я использую Flash Builder 4.7, Flex 4.6 и Air SDK 13.0 на 64-битной Win 7 Machine.)

Image 1 - 100% Image 2 - 30%

ответ

1

Спасибо за ваш ответ, действительно ценю это! Однако это, к сожалению, не решение, поскольку оно просто устанавливает высоту так же, как и ширину. В этом случае две метки приближаются к изображению, но не в том месте, где они должны были идти.

Между тем я мог найти способ правильно изменить размер изображения вместе с его ограничивающим прямоугольником. Основная идея состоит в том, чтобы поместить изображение в контейнер и отрегулировать размер изображения в соответствии с отношением размера контейнера, разделенным на исходный размер изображения.

Затем изображение полностью заполнит контейнер, и затем я смогу установить желаемый коэффициент масштабирования, отрегулировав ширину контейнера.

Вот мой код, который работает отлично, и я очень надеюсь, что это поможет кому-то еще в будущем:

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

0

Высота изображения действительно остается нетронутым только установив ширина изображения. Если вы нарисуете прямоугольник вокруг изображения, вы увидите рамку с одинаковым размером все время.

Вы можете изменить свой код как следующий иметь динамическую высоту и имеют метки позиционируются как вы хотите:

<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> 
Смежные вопросы