Видеоэффекты

Silverlight 5 --- Видеоэффекты

Кисть VideoBrush

Платформа Silverlight предоставляет элемент VideoBrush, отображающий видеосодержимое, которое в данный момент воспроизводится заданным элементом MediaElement. Как и другие кисти Silverlight, объект VideoBrush можно использовать для заполнения любых базовых фигур, контуров и элементов.

Чтобы применить кисть VideoBrush, нужно создать элемент MediaElement для воспроизводимого видеофайла:

<MediaElement x:Name="media" AutoPlay="True" Source="ComedyClub.wmv" Visibility="Collapsed" />

Обратите внимание на то, что в данном примере свойству Visibility присвоено значение Collapsed. Поэтому исходное окно элемента MediaElement не появится. Видеосодержимое будет прорисовано кистью VideoBrush.

Для кисти VideoBrush нужно задать элемент, в котором будет прорисовываться видеосодержимое. Можно использовать любой элемент, в котором допустимо применение кистей. Например, в фигуре кисть можно добавить в свойство Fill или Stroke. В элементах Silverlight кисть добавляется в свойство Foreground или Background. В следующем примере кисть VideoBrush заполняет текст элемента TextBlock:

<TextBlock FontSize="80" Text="Видео в буквах" FontFamily="Arial Black">
      <TextBlock.Foreground>
                <VideoBrush SourceName="media"></VideoBrush>
      </TextBlock.Foreground>
</TextBlock>

Свойство SourceName связывает кисть VideoBrush с элементом MediaElement. Результат показан на рисунке ниже, текст заполнен воспроизводящимся видеосодержимым:

При использовании кисти VideoBrush элемент MediaElement управляет воспроизведением. В данном примере воспроизведение видеофайла начинается автоматически, потому что свойство AutoPlay имеет значение True. Если оно имеет значение False, управлять воспроизведением можно с помощью свойства Position и методов Play(), Stop() и Pause() элемента MediaElement.

Элемент MediaElement работает так же, как и любой другой элемент Silverlight, а кисть VideoBrush — так же, как и любая другая кисть. Поэтому манипулировать видеосодержимым можно многими способами:

• Элемент MediaElement можно использовать в качестве содержимого другого элемента, например кнопки.

• Можно одновременно воспроизводить видеосодержимое во многих элементах интерфейса с помощью многих объектов MediaElement. Их количество ограничено лишь быстродействием процессора.

• Видеосодержимое можно комбинировать с объектами преобразований с помощью свойства RenderTransform. Это позволяет перемещать, растягивать, наклонять видеостраницу.

• С помощью свойства Clipping элемента MediaElement можно отсекать видеостраницу заданной фигурой или контуром.

• Свойство Opacity позволяет выводить полупрозрачное видеосодержимое. С его помощью можно увидеть несколько полупрозрачных видеостраниц одна сквозь другую.

• Средства анимации позволяют динамически изменять свойства объекта MediaElement или объекта преобразований.

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

Ниже показан пример видеосодержимого с эффектом зеркального отражения, создаваемым с помощью двух строк Grid. Верхняя строка содержит элемент MediaElement, воспроизводящий видеофайл. В нижней строке расположен элемент Rectangle, рисуемый кистью VideoBrush. Видеосодержимое отражается с помощью свойства RelativeTransform и плавно затеняется с помощью градиента OpacityMask. Ниже приведена разметка:

<Grid Margin="15" HorizontalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <MediaElement x:Name="media" Source="ComedyClub.wmv" Stretch="Uniform"></MediaElement>

        <Rectangle Grid.Row="1">
            <Rectangle.Fill>
                <VideoBrush SourceName="media">
                    <VideoBrush.RelativeTransform>
                        <ScaleTransform ScaleY="-1" CenterY="0.5" CenterX="0" ScaleX="1"></ScaleTransform>
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Rectangle.Fill>

            <Rectangle.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#99000000" Offset="0"></GradientStop>
                    <GradientStop Color="Transparent" Offset="0.6"></GradientStop>
                </LinearGradientBrush>
            </Rectangle.OpacityMask>
        </Rectangle>

</Grid>

Быстродействие примера вполне удовлетворительное, надстройка Silverlight не создает задержек. Каждый кадр копируется в нижний прямоугольник, зеркально отражается и плавно затеняется. В объекте преобразования используется промежуточная поверхность вывода. Загрузка и декодирование каждого кадра выполняются только один раз, поэтому на современном компьютере накладные расходы незначительные и не влияют на качество вывода.