Windows 8 WinRT中的路径几何裁剪等价_Windows 8_Windows Runtime_Winrt Xaml

Windows 8 WinRT中的路径几何裁剪等价

windows-8 windows-runtime

Windows 8 WinRT中的路径几何裁剪等价,windows-8,windows-runtime,winrt-xaml,Windows 8,Windows Runtime,Winrt Xaml,今天，我开始将为WindowsPhone7创建的翻页示例移植到WinRT（XAML，C#）中，以帮助在堆栈溢出中发布问题。但在移植过程中，我被页面的剪辑部分卡住了。在windows phone示例中，他们使用路径几何体剪裁来剪裁页面。但在WinRT中，似乎只有矩形几何体支持剪切选项如何在WinRT中实现类似路径几何剪裁的功能？您可以从下载示例windows phone代码请找到我试过的源代码在这一部分中，请查找PageTurn.cs类，我在以下内容中对代码进行了注释： void left

今天，我开始将为WindowsPhone7创建的翻页示例移植到WinRT（XAML，C#）中，以帮助在堆栈溢出中发布问题。但在移植过程中，我被页面的剪辑部分卡住了。在windows phone示例中，他们使用路径几何体剪裁来剪裁页面。但在WinRT中，似乎只有矩形几何体支持剪切选项

如何在WinRT中实现类似路径几何剪裁的功能？

您可以从下载示例windows phone代码

请找到我试过的源代码

在这一部分中，请查找PageTurn.cs类，我在以下内容中对代码进行了注释：

void left_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    //_workingOdd.Clip = _oddClipRegion;       
    //_workingEven.Clip = _evenClipRegion;
}

对于图像-您只需使用

ImageBrush

并使用它填充具有所需几何体的

路径。对于任何更复杂的问题，请使用RenderTargetBitmap.Render（）
将XAML转换为位图，然后返回答案1。
因此，让我们先了解情况
WinRT XAML现在在WP 8.1上受支持
WP Silverlight XAML可以做的比WinRT XAML更多
例如，WP-SL-XAML可以使用自定义路径进行剪裁
WinRT XAML只能使用矩形进行剪裁
原因：矩形无法执行任何自定义形状、句点
XAML团队让性能胜过能力
如今，XAML团队没有改变剪辑的计划
现在我们明白了问题所在。
我们还有其他选择吗
如果你想剪辑一张图片，你很幸运。可以创建任何形状的路径元素，并使用图像笔刷绘制背景。从技术上讲，这不是剪辑，但您具有相同的效果
<Path Data="M540,394 C544.208,422.053 538.553,441.447 514,466 C490.615,489.385 
485.625,493.625 448,456 C423.947,431.947 425.435,394.188 486,374 C457.465,374 
452,353.019 452,312 C452,280.568 446.005,289.33 478,268 C514.938,243.374 
496.654,264 536,264 C538.338,275.69 546,280.948 546,294 C540.421,280.052 
545.708,255.719 564,242 C577.778,231.667 594.285,223.858 610,216 C617.244,212.378 
619.853,219.804 626,228 C630.353,233.805 671.625,322.65 620,302 C660.196,302 
680,306.666 680,374 C680,393.824 652.592,424.592 614,386 C614,403.28 
621.284,411.789 614,430 C607.693,445.768 601.833,454 580,454 C550.466,454 
548.934,443.082 534,414" HorizontalAlignment="Left" Height="269.872" 
Margin="433.483,215.058,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" 
VerticalAlignment="Top" Width="247.517">
    <Path.Fill>
        <ImageBrush Stretch="None" ImageSource="Assets/SplashScreen.png"/>
    </Path.Fill>
</Path>



这将导致：

但是等等，还有更多。可以变换ImageBrush本身。这意味着您可以对图像执行平移，在路径内移动图像。此外，还可以对图像应用旋转
首先，考虑像FLIPRANK一样的动画。这给了你一个简单的页面翻转动画，看起来非常棒，实际上不需要复杂的剪辑。查看此演示：
再说一遍，您可能只是想复制该演示。那很好。下面的XAML将为您提供您想要的效果。而且很容易设置动画：
<Grid>
    <Rectangle Stroke="Black" Width="800" Height="400">
        <Rectangle.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="Assets/car.jpg"/>
        </Rectangle.Fill>
    </Rectangle>
    <Grid Width="800" Height="400">
        <Grid.Clip>
            <RectangleGeometry Rect="0,-400,800,800" />
        </Grid.Clip>
        <Grid Width="800" Height="400" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform ScaleX="-1" Rotation="30.957" TranslateX="527" TranslateY="108"/>
            </Grid.RenderTransform>
            <Grid.Background>
                <ImageBrush Stretch="UniformToFill" ImageSource="Assets/car.jpg"/>
            </Grid.Background>
            <Rectangle Fill="Purple" Opacity=".5" />
        </Grid>
    </Grid>
</Grid>



它看起来是这样的：
以下是XAML，以获得您链接到的演示的准确外观：
<Grid Width="800" Height="200" Margin="283,283,283,285">
    <Grid.Clip>
        <RectangleGeometry Rect="-200,-200,1000,400" />
    </Grid.Clip>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400" />
        <ColumnDefinition Width="400" />
    </Grid.ColumnDefinitions>
    <Path x:Name="Page2" Grid.Column="1" Data="M0.5,0.5 L495,-1 L399.5,199.5 L0.5,199.5 z" Stretch="Fill" Margin="0,-1.5,-95.5,0" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" >
        <Path.RenderTransform>
            <CompositeTransform TranslateX="-200"/>
        </Path.RenderTransform>
        <Path.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Car2.jpg"/>
        </Path.Fill>
    </Path>
    <Path x:Name="Page4" Data="M94,2 L495,-1 L495,201 L0.5,199.5 z" Stretch="Fill" Margin="400,-3.5,-495.5,0.5" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" >
        <Path.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Car4.jpg"/>
        </Path.Fill>
        <Path.RenderTransform>
            <CompositeTransform TranslateX="200"/>
        </Path.RenderTransform>
    </Path>
    <Image x:Name="Page1" Source="Assets/Car1.jpg" Grid.Column="0" Stretch="UniformToFill" />
    <Grid x:Name="Page3" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <CompositeTransform TranslateX="-156" Rotation="25" TranslateY="-94" ScaleX="1.1" ScaleY="1.1"/>
        </Grid.RenderTransform>
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,400,200" />
        </Grid.Clip>
        <Border BorderThickness="5,5,5,0" BorderBrush="White">
            <Border.RenderTransform>
                <CompositeTransform TranslateX="175"/>
            </Border.RenderTransform>
            <Image x:Name="Page3Image" Source="Assets/Car3.jpg" Stretch="UniformToFill"/>
        </Border>
    </Grid>
</Grid>



看起来是这样的：

Stephan，我不确定这需要多少调整才能正确。我猜是。。。很多。好消息是：您可以在GPU上设置变换动画，因此大部分转换都应该加速。：）
//杰瑞
希望这对你有帮助
以下是XAML，以获得您链接到的演示的准确外观：
<Grid Width="800" Height="200" Margin="283,283,283,285">
    <Grid.Clip>
        <RectangleGeometry Rect="-200,-200,1000,400" />
    </Grid.Clip>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400" />
        <ColumnDefinition Width="400" />
    </Grid.ColumnDefinitions>
    <Path x:Name="Page2" Grid.Column="1" Data="M0.5,0.5 L495,-1 L399.5,199.5 L0.5,199.5 z" Stretch="Fill" Margin="0,-1.5,-95.5,0" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" >
        <Path.RenderTransform>
            <CompositeTransform TranslateX="-200"/>
        </Path.RenderTransform>
        <Path.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Car2.jpg"/>
        </Path.Fill>
    </Path>
    <Path x:Name="Page4" Data="M94,2 L495,-1 L495,201 L0.5,199.5 z" Stretch="Fill" Margin="400,-3.5,-495.5,0.5" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" >
        <Path.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Car4.jpg"/>
        </Path.Fill>
        <Path.RenderTransform>
            <CompositeTransform TranslateX="200"/>
        </Path.RenderTransform>
    </Path>
    <Image x:Name="Page1" Source="Assets/Car1.jpg" Grid.Column="0" Stretch="UniformToFill" />
    <Grid x:Name="Page3" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <CompositeTransform TranslateX="-156" Rotation="25" TranslateY="-94" ScaleX="1.1" ScaleY="1.1"/>
        </Grid.RenderTransform>
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,400,200" />
        </Grid.Clip>
        <Border BorderThickness="5,5,5,0" BorderBrush="White">
            <Border.RenderTransform>
                <CompositeTransform TranslateX="175"/>
            </Border.RenderTransform>
            <Image x:Name="Page3Image" Source="Assets/Car3.jpg" Stretch="UniformToFill"/>
        </Border>
    </Grid>
</Grid>

路径计算

Image1
 <Grid Background="Black">
    <Grid Height="145" Width="210" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Margin="-3" BorderThickness="3" BorderBrush="White" Grid.ColumnSpan="2"></Border>
        <Image Grid.Column="0" Source="Images/1.jpg"></Image>
        <Image Grid.Column="1" Source="Images/2.jpg" ></Image>
        <Image Grid.Column="1" HorizontalAlignment="Left"  Source="Images/8.jpg" >
            <Image.Clip>
                <RectangleGeometry Rect="0,0,49,150"></RectangleGeometry>
            </Image.Clip>
        </Image>
        <Path Grid.ColumnSpan="2"  Data="M 180,0 L 153,145 L 85 120 L 160,-12"   >
            <Path.Fill>
                <ImageBrush ImageSource="Images/4.jpg"/>
            </Path.Fill>
        </Path>
        <!--polyline used for path image border-->
        <Polyline Points="180,0,160,-11,85,120,153,145" Margin="0,-2,0,0"  Stroke="White" StrokeThickness="3"  Grid.ColumnSpan="2"/>
    </Grid>
</Grid>



图像2
    <Grid Background="Black">
    <Grid Width="290" Height="180" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"  BorderThickness="2,0,0,0" BorderBrush="White">
            <Image Stretch="Fill"  Source="Images/4.jpg"></Image>
        </Border>
        <Image Grid.Column="1" Source="Images/3.jpg" ></Image>
        <Path Grid.ColumnSpan="2"  Data="M 200,0 L 170,180 L 82.5 160 L 130 0 "   >
            <Path.Fill>
                <ImageBrush ImageSource="Images/6.jpg"/>
            </Path.Fill>
        </Path>
        <!--polyline used for path image border-->
        <Polyline Points="130,0,82.5,160,170,180"   Stroke="White" StrokeThickness="2"  Grid.ColumnSpan="2"/>
    </Grid>
</Grid>



输出

您可以通过将image1和image2网格放入viewbox来放大图像的大小，如下所示
 <Viewbox Width="500" Height="350">
    <Grid Width="290" Height="180"/>        
 </Viewbox>

我给出更完整的答案有点晚了，但我受到了启发，开始研究可重用控件/页面转换。当前的原型与RenderTransforms
和Clip
Transforms
配合得非常好，可以提供独立的动画支持

我将使用WinRT XAML工具包的可重用控件，但同时您可以检查以下代码：
XAML
<Page
    x:Class="FlipControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlipControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid
        x:Name="ManipulationGrid"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        ManipulationMode="TranslateX,TranslateY,TranslateInertia"
        ManipulationStarted="ManipulationGrid_OnManipulationStarted"
        ManipulationDelta="ManipulationGrid_OnManipulationDelta"
        ManipulationCompleted="ManipulationGrid_OnManipulationCompleted">
        <Grid
            x:Name="Page1">
            <Grid.Clip>
                <RectangleGeometry
                    Rect="0,0,80000,80000">
                    <RectangleGeometry.Transform>
                        <TransformGroup>
                            <TranslateTransform
                                x:Name="Page1ClipTranslateTransform" />
                            <RotateTransform
                                x:Name="Page1ClipRotateTransform" />
                        </TransformGroup>
                    </RectangleGeometry.Transform>
                </RectangleGeometry>
            </Grid.Clip>
            <Grid
                x:Name="Page1ContentGrid">
                <Image
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Stretch="UniformToFill"
                    Source="http://bigbackground.com/wp-content/uploads/2013/07/tropical-beach-screensaver.jpg" />
            </Grid>
        </Grid>
        <Grid
            x:Name="Page2"
            Opacity="0">
            <Grid.Clip>
                <RectangleGeometry
                    Rect="0,0,80000,80000">
                    <RectangleGeometry.Transform>
                        <TransformGroup>
                            <TranslateTransform
                                x:Name="Page2ClipTranslateTransform" />
                            <RotateTransform
                                x:Name="Page2ClipRotateTransform" />
                        </TransformGroup>
                    </RectangleGeometry.Transform>
                </RectangleGeometry>
            </Grid.Clip>
            <Grid
                x:Name="Page2ContentGrid">
                <Image
                    x:Name="Page2SampleContentImage"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Stretch="UniformToFill"
                    Source="http://www.photography-match.com/views/images/gallery/Tropical_Lagoon.jpg" />
            </Grid>
        </Grid>
        <Grid
            x:Name="TransitionGridContainer">
            <Grid
                x:Name="TransitionGrid"
                Opacity="0">
                <Grid.RenderTransform>
                    <CompositeTransform
                        x:Name="TransitionGridContainerTransform" />
                </Grid.RenderTransform>
                <Grid.Clip>
                    <RectangleGeometry
                        Rect="0,0,80000,80000">
                        <RectangleGeometry.Transform>
                            <TransformGroup>
                                <TranslateTransform
                                    x:Name="TransitionGridClipTranslateTransform" />
                                <RotateTransform
                                    x:Name="TransitionGridClipRotateTransform" />
                            </TransformGroup>
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Grid.Clip>
                <Image
                    x:Name="TransitionImage"
                    Stretch="None" />
            </Grid>
        </Grid>
    </Grid>
</Page>



C#
使用系统；
使用System.Threading.Tasks；
使用Windows基金会；
使用Windows.UI.Popups；
使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
使用Windows.UI.Xaml.Input；
使用Windows.UI.Xaml.Media.Animation；
使用Windows.UI.Xaml.Media.Imaging；
命名空间翻转控件
{
公共密封部分类主页面：第页
{
公共主页（）
{
this.InitializeComponent（）；
Preload TransitionGridContentAsync（）；
}