Windows Phone 8.1中图像的OpacityMask

Question

Windows Phone 8.1中图像的OpacityMask

windows-runtimewindows-phone-8.1windows-store-appswinrt-xaml

4

在 Windows Phone 8.1 运行时应用中，我需要使用圆形裁剪图像，为此我使用了以下代码：

    <Ellipse x:Name="ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" VerticalAlignment="Center" HorizontalAlignment="Center"  >
        <Ellipse.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=image}"/>
        </Ellipse.Fill>
    </Ellipse>

    <Grid Background="Black" >
        <Image x:Name="image" Source="ms-appx:///Assets/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" HorizontalAlignment="Center" Height="300" Opacity="0.5" />
    </Grid>

这是结果：

为了渲染椭圆，我使用了以下代码：

var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(ellipse);

我需要让用户在该图像上进行缩放和翻译，那么如何以一种方式处理这两个图像，使它们看起来像一个图像呢？

- frenk91

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- frenk91 · Answer 1

好的，经过各种研究和测试，我找到了解决问题的方法。

使用这段代码，您可以处理完整的操作事件，包括旋转、缩放和平移！

XAML：

<Grid x:Name="LayoutRoot" Background="Black">
    <Grid.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </Grid.ChildrenTransitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="1" x:Name="ContentRoot" RenderTransformOrigin="0.5,0.5" Opacity="0.5" >
        <Image x:Name="Image" Source="ms-appx:///Assets/AccountManagement/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" ScrollViewer.HorizontalScrollBarVisibility="Visible" HorizontalAlignment="Center" Height="300" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <CompositeTransform x:Name="ImageCompositeTransform" Rotation="0" TranslateX="0" TranslateY="0" ScaleX="1" ScaleY="1" />
            </Image.RenderTransform>
        </Image>
    </Grid>

    <Ellipse ManipulationDelta="Ellipse_ManipulationDelta" x:Name="Ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" Margin="0" Grid.Row="1" VerticalAlignment="Center" d:LayoutOverrides="Height" HorizontalAlignment="Center" ManipulationMode="All" RenderTransformOrigin="0.5,0.5" >
        <Ellipse.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=Image}">
                <ImageBrush.Transform>
                    <CompositeTransform CenterX="150" CenterY="150" ScaleX="{Binding ScaleX, ElementName=ImageCompositeTransform}" ScaleY="{Binding ScaleY, ElementName=ImageCompositeTransform}" TranslateX="{Binding TranslateX, ElementName=ImageCompositeTransform}" TranslateY="{Binding TranslateY, ElementName=ImageCompositeTransform}" Rotation="{Binding Rotation, ElementName=ImageCompositeTransform}" />
                </ImageBrush.Transform>
            </ImageBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

C#:

private void Ellipse_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    ImageCompositeTransform.ScaleX *= e.Delta.Scale;
    ImageCompositeTransform.ScaleY *= e.Delta.Scale;
    ImageCompositeTransform.Rotation += e.Delta.Rotation / Math.PI;
    ImageCompositeTransform.TranslateX += e.Delta.Translation.X;
    ImageCompositeTransform.TranslateY += e.Delta.Translation.Y;        
}