如何在多边形内旋转位图？答案

【问题标题】：How to rotate a bitmap inside a polygon?如何在多边形内旋转位图？
【发布时间】：2016-05-12 20:16:44
【问题描述】：

我这样定义了一个多边形：

            <!-- Draws a hexagon by specifying the vertices of a polygon -->
            <Polygon x:Name="polygon"
                     Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
                     Margin="25, 0, 25, 25"
                     Stroke="Red"
                     RenderTransformOrigin="0.5,0.5">

                <Polygon.RenderTransform>
                    <CompositeTransform />
                </Polygon.RenderTransform>

                <Polygon.Fill>
                    <ImageBrush x:Name="imageBrush"
                                ImageSource="Assets/image1.jpg"
                                Stretch="Fill">
                    </ImageBrush>
                </Polygon.Fill>
            </Polygon>

我还定义了一个这样的故事板：

    <Storyboard x:Name="Storyboard2">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                                       Storyboard.TargetName="polygon">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:2"
                                  Value="-360" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

我这样开始多边形旋转：

        Storyboard2.BeginTime = new TimeSpan( 0 );
        Storyboard2.Begin();

上面的代码按预期旋转了整个多边形。但是我想修改它，让多边形静止，只是在多边形内旋转位图。

我该怎么做？谢谢

【问题讨论】：

您是否尝试将TargetName 从“polygon”更改为“imageBrush”？
是的。我做到了，但没有做到这一点。应用程序崩溃。
是的，崩溃是意料之中的，您需要应用 Transform 并将动画应用到它，如果我在回家之前有时间，我会举个例子。
我试过这个：但没有成功。
旋转是您想要完成的所有事情，对吗？有点希望我能看到想要的结果，因为通常有不止一种方法可以给猫剥皮（俗话说）。

标签： c# xaml win-universal-app polygon imagebrush

【解决方案1】：

要旋转多边形内的图像，您可以尝试使用ImageBrush.RelativeTransform property，如下所示：

<Polygon x:Name="polygon"
         Margin="25, 0, 25, 25"
         Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
         Stroke="Red">
    <Polygon.Fill>
        <ImageBrush x:Name="imageBrush" ImageSource="Assets/Capture.PNG" Stretch="Fill">
            <ImageBrush.RelativeTransform>
                <CompositeTransform CenterX="0.5" CenterY="0.5" />
            </ImageBrush.RelativeTransform>
        </ImageBrush>
    </Polygon.Fill>
</Polygon>

并更改您的Storyboard，如下所示：

<Storyboard x:Name="Storyboard2">
    <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
                                   Storyboard.TargetName="imageBrush"
                                   Storyboard.TargetProperty="(Brush.RelativeTransform).(CompositeTransform.Rotation)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-360" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

这里，由于目标是ImageBrush，所以我们需要将Storyboard.TargetProperty改为(Brush.RelativeTransform).(CompositeTransform.Rotation)。由于动画的目标是Brush.RelativeTransform，所以它是一个依赖动画。我们需要将EnableDependentAnimation 属性设置为true 以启用此动画。更多依赖动画请见Dependent and independent animations。

之后，你可以调用Storyboard2.Begin();来启动动画。

【讨论】：

这看起来更正确，但我目前没有办法测试。我可以发誓 Brush.Transform 虽然不会接受 CompositeTransform。虽然 Jay 对你有用？
酷所以它会接受复合？学到了新东西，+1

【解决方案2】：

由于我目前无法在 UWP enviro 上进行测试，因此这是在 WPF 中完成的方式，相同的概念......但我认为语法可能有点不同，因此我想测试。

故事板：

<Storyboard x:Key="SpinThisBugger" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="polygon">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

触发启动它：

<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource SpinThisBugger}"/>
    </EventTrigger>
</Window.Triggers>

聚：

<Polygon x:Name="polygon"
                     Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                     Stroke="Red"
                     RenderTransformOrigin="0.5,0.5">
            <Polygon.Fill>
                <ImageBrush x:Name="imageBrush"
                                ImageSource="Images/learn-hypnosis.jpg"
                                Stretch="Fill">
                    <ImageBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform CenterY="0.5" CenterX="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ImageBrush.RelativeTransform>
                </ImageBrush>
            </Polygon.Fill>

        </Polygon>

...以及我使用的图像，因为它很漂亮哈哈：

【讨论】：

只有RelativeTransform 或Transform。无渲染变换
我确实尝试了你的建议。它没有崩溃，但也没有旋转。
是的，对不起@eitanbarazani，我昨晚没时间继续工作，现在是星期五，周末即将到来。在我有时间回来提供一个经过实际测试的解决方案之前，我会稍作修改，但希望 Jay 的回答是正确的。
@eitanbarazani 使用工作/测试示例更新了示例，但它适用于 WPF，因此语法上可能存在一些细微差别。