OpacityMask對圖像中的窗口電話8.1

Question

在Windows電話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); 

我不得不讓用戶翻譯和放大這張圖片，我該如何操作這兩張圖片才能看到一張圖片？

Answer 1

好，等variour研究和各種測試後，這是我的問題的解決方案。

使用這個代碼，您可以處理完整的操作事件，包括旋轉縮放和翻譯！

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;   
}