Создание изображения, охватывающего несколько компонентов в Flex

Question

Недавно я нашел хороший онлайн-инструмент для построения диаграмм - LovelyCharts. Мне нравится, как разработан пользовательский интерфейс - вы можете посмотреть скриншот здесь . Интересно, как сделать изображение, которое охватывает несколько компонентов, например логотип LovelyCharts в правом верхнем углу экрана. Кто-нибудь может пнуть меня в правильном направлении?

Answer 1

Вам необходимо создать изображение с прозрачным фоном. Формат JPEG не поддерживает прозрачный фон, поэтому вам нужно использовать GIF или другой формат. Затем вставьте изображение, как показано в следующем коде.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Canvas width="476"
               height="264">
        <mx:Label x="103"
                  y="110"
                  text="Some text"
                  width="155"/>
        <mx:Image x="115"
                  y="110"
                  width="100"
                  height="100"
                  source="@Embed('assets/transparent_back.gif')"/>
    </mx:Canvas>

Вы можете расположить изображение в нужном месте на холсте, перекрывая другие компоненты, если хотите. Вот пример изображения с прозрачным фоном, http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif

Answer 2

Это определенно должно работать для вас. Макет приложения является абсолютным, и есть два примера изображений - одно объявлено внутри тегов canvas, а другое снаружи

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute">
    <mx:Canvas width="476"
               height="264"
               x="50"
               y="0"
               borderStyle="solid"
               borderThickness="5"
               borderColor="black">
        <mx:Label x="103"
                  y="110"
                  text="Some text"
                  width="155"/>
        <mx:Image x="115"
                  y="110"
                  width="100"
                  height="100"
                  source="@Embed('assets/transparent_back.gif')"/>
    </mx:Canvas>
    <mx:Image x="30"
              y="110"
              width="100"
              height="100"
              source="@Embed('assets/transparent_back.gif')"/>

</mx:Application>