Статьи

Графика Flex 4: отображение растровых данных в графическом элементе

Февраль 14, 2018

проблема

Вы хотите отобразить растровое изображение в графическом элементе.

Решение

Используйте элемент BitmapImage или предоставьте BitmapFill для элемента на основе FilledElement и установите для свойства source значение допустимого представления растрового изображения. При желании, установите fillMode рисунка, чтобы обрезать, масштабировать или повторить данные изображения в элементе.

обсуждение

Растровая информация из источника изображения может быть визуализирована в графическом элементе во фрагменте FXG. Элемент BitmapImage может использоваться для определения прямоугольной области, в которой будет отображаться исходное растровое изображение, или любому элементу на основе FilledElement может быть назначен BitmapFill для визуализации данных в пользовательском заполненном пути. fillMode — это свойство как BitmapImage, так и BitmapFill, которое определяет, как данные растрового изображения должны отображаться в элементе. Значения, доступные для fillMode, перечислены в классе BitmapFillMode и позволяют обрезать, масштабировать и повторять данные растрового изображения в пределах определенных границ элемента. По умолчанию для свойства fillMode установлено значение масштаба, которое заполняет область отображения элемента исходными данными растрового изображения.

В следующем примере демонстрируется использование элемента BitmapImage и BitmapFill внутри фрагмента MXML для отображения информации растрового изображения:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>

        <![CDATA[

            import mx.graphics.BitmapFillMode;

        ]]>

    </fx:Script>

    <s:Graphic>

        <s:Group>

            <s:layout>

                <s:HorizontalLayout />

            </s:layout>

            <s:BitmapImage id="img" width="450" height="400"

                           source="@Embed('assets/icon.png')" />

            <s:Ellipse id="imgEllipse" width="450" height="400">

                <s:fill>

                    <s:BitmapFill id="imgFill"

                                  fillMode="{BitmapFillMode.REPEAT}"

                                  source="@Embed('assets/icon.png')" />

                </s:fill>

            </s:Ellipse>

        </s:Group>

    </s:Graphic>

</s:Application>

Свойство source элемента BitmapImage или BitmapFill элемента, когда оно объявлено в MXML, может указывать на различные графические ресурсы. Источником может быть объект Bitmap, объект BitmapData, любой экземпляр или ссылка на класс элемента на основе DisplayObject или файл изображения, указанный с помощью директивы @Embed. Если используется ссылка на файл, путь к файлу изображения должен быть относительным во время компиляции; при использовании элементов FXG в разметке MXML отсутствует поддержка загрузки изображения во время выполнения.

Рисунок 4.2, «Примеры рендеринга растрового изображения в графике» показывает несколько примеров эффектов, которые вы можете достичь, используя различные графические элементы и режимы заливки. Слева изображение загружается и изменяется для заполнения прямоугольной формы. Справа то же изображение загружается в форму эллипса и повторяется в исходном размере, чтобы заполнить форму.

Рисунок 4.2. Примеры рендеринга растрового изображения в графике

Значение свойства источника для элемента, отображающего растровые данные в документе FXG, может указывать либо на относительный путь к файлу для ресурса изображения, либо на URL-адрес. Растровая информация компилируется в графический элемент в документе FXG, и такие понятия времени выполнения, как обновление источника на основе загруженной графической информации, неприменимы.

Ниже приведен пример предоставления URL-адреса для свойства источника элемента BitmapImage в документе FXG:

<!-- MyBitmapGraphic.fxg -->

<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">

    <BitmapImage width="600" height="150" fillMode="repeat"

                 source="http://covers.oreilly.com/images/9780596529857/bkt.gif"

/>

</Graphic>

Не допускается указание URL-адреса для заливки растрового изображения элемента во фрагменте FXG в разметке MXML. Однако для графики, объявленной в MXML, используются различные концепции времени выполнения, в том числе реагирование на изменения состояния, привязка данных и (в отношении отображения растровой информации) загрузка графических ресурсов и обновление источника элемента растрового изображения во время выполнения. В следующем примере демонстрируется установка свойства source объекта BitmapImage для экземпляра Bitmap во время выполнения наряду с визуализацией графического элемента документа FXG:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx"

               xmlns:f4cb="com.oreilly.f4cb.*"

               creationComplete="handleCreationComplete();">

    <fx:Script>

        <![CDATA[

            import mx.graphics.BitmapFillMode;

            private function handleCreationComplete():void

            {

                var loader:Loader = new Loader();

                loader.contentLoaderInfo.addEventListener(Event.COMPLETE,

                                                          handleLoadComplete);

                loader.load( new URLRequest(

                    'http://covers.oreilly.com/images/9780596529857/bkt.gif' ) );

            }

            private function handleLoadComplete( evt:Event ):void

            {

                var bmp:Bitmap = ( evt.target as LoaderInfo ).content as Bitmap;

                img.source = bmp;

            }

        ]]>

    </fx:Script>

    <s:layout>

        <s:VerticalLayout />

    </s:layout>

    <s:Graphic>

        <s:Group>

            <s:layout>

                <s:HorizontalLayout />

            </s:layout>

            <s:BitmapImage id="img"

                           width="450" height="400"

                           fillMode="{BitmapFillMode.SCALE}" />

            <f4cb:MyBitmapGraphic />

        </s:Group>

    </s:Graphic>

</s:Application>

Вы найдете всю 4-ю главу книги о графике Flex 4, опубликованную на сайте O’Reilly !


Вам также может понравиться:

35
Share: