Wie man eine Bitmap in einem Polygon dreht?

I definiert ein Polygon wie folgt aus:Wie man eine Bitmap in einem Polygon dreht?

  <!-- 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>

I definiert auch ein Storyboard wie folgt aus:

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

ich das Polygon Rotation wie folgt beginnen:

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

Der obige Code drehen das gesamte Polygon wie erwartet. Allerdings möchte ich es modifizieren und das Polygon stationär halten und nur die Bitmap innerhalb des Polygons drehen.

Wie mache ich das? Thx

Quelle

2016-05-12 eitan barazani

Haben Sie die 'TargetName' von„Polygon“zu ändern versucht,„ImageBrush“? – aloisdg

ja. Ich habe es getan, aber nicht den Trick gemacht. Die Anwendung stürzt ab. –

Yea der Absturz zu erwarten, benötigen Sie einen [Transformation] (https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.brush.transform) und anzuwenden Wende die Animation darauf an, wenn ich Zeit habe, bevor ich nach Hause fahre, werde ich ein Beispiel auftreiben. –

Um das Bild in Ihrem Polygon drehen Sie mit ImageBrush.RelativeTransform property wie folgt ausprobieren können:

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

Und Ihre ändern Storyboard wie folgt vor:

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

Hier, wie das Ziel ImageBrush ist, Also müssen wir Storyboard.TargetProperty zu (Brush.RelativeTransform).(CompositeTransform.Rotation) ändern. Und da die Animation auf Brush.RelativeTransform zielt, ist es eine abhängige Animation. Wir müssen die Eigenschaft EnableDependentAnimation auf true setzen, um diese Animation zu aktivieren. Weitere Informationen zur abhängigen Animation finden Sie unter Dependent and independent animations.

Danach können Sie Storyboard2.Begin(); rufen die Animation zu starten.

Quelle

2016-05-13 10:02:42

Das sieht korrekter aus, aber ich habe momentan keine Möglichkeit zu testen. Ich hätte schwören können, dass Brush.Transform CompositeTransform nicht akzeptiert. Es funktionierte für dich, obwohl Jay? –

Danke an Chris & Jay. Problem gelöst :) –

Cool, so wird es Composite akzeptieren? Etwas Neues gelernt, +1 –

Da ich auf einem UWP enviro im Moment nicht testen kann, hier ist, wie es in WPF getan wird, das gleiche Konzept ... aber ich denke, die Syntax kann ein wenig anders sein, warum ich wollte Prüfung.

Storyboard:

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

Trigger es zu starten:

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

Die Poly:

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

... und das Bild, das ich verwenden, da es war geschickt lol:

Quelle

2016-05-12 21:42:12

hat nur Relative oder Transformation. Kein Render –

Ich habe versucht, obwohl Ihren Vorschlag. Es stürzte nicht ab, rotierte aber auch nicht. –

Ja Sorry @ Eitanbarazani Ich hatte letzte Nacht keine Zeit, zurück zu kommen, und es ist Freitag mit dem kommenden Wochenende. Ich werde das in Kürze aufgeben, bis ich Zeit habe, mit einer tatsächlich getesteten Lösung zurück zu kommen, aber hoffentlich ist Jays Antwort richtig. –

Wie man eine Bitmap in einem Polygon dreht?

Antwort

Verwandte Themen