OpacityMask on Image in windows phone 8.1
在 windows phone 8.1 运行时应用程序中,我需要使用圆圈裁剪图像,为此我使用了以下代码:
1 2 3 4 5 6 7 8 9 | <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> |
this is the result:
为了渲染椭圆,我使用以下代码:
1 2 | var bitmap = new RenderTargetBitmap(); await bitmap.RenderAsync(ellipse); |
我必须让用户翻译和缩放这张图片,我怎样才能让这两张图片看起来像一张图片?
好的,经过各种研究和各种测试,这就是我的问题的解决方案。
使用 tis 代码,您可以处理完整的操作事件,包括旋转缩放和平移!
XAML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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#:
1 2 3 4 5 6 7 8 | 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; } |