如何在多边形内旋转位图?
How to rotate a bitmap inside a polygon?
我这样定义了一个多边形:
<!-- 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();
以上代码按预期旋转了整个多边形。但是我想修改它,让多边形静止不动,只在多边形内旋转位图。
我该怎么做?
谢谢
由于我目前无法在 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>
...以及我使用的图像,因为它很漂亮哈哈:
要在多边形内旋转图像,您可以尝试使用 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();
启动动画
我这样定义了一个多边形:
<!-- 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();
以上代码按预期旋转了整个多边形。但是我想修改它,让多边形静止不动,只在多边形内旋转位图。
我该怎么做? 谢谢
由于我目前无法在 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>
...以及我使用的图像,因为它很漂亮哈哈:
要在多边形内旋转图像,您可以尝试使用 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();
启动动画