Вращающееся изображение внутри границы

Question

Hi,

У меня есть изображение внутри границы, для которого я бы предоставил угол. В настоящее время я просто жестко кодирую его до 45.

Моя проблема заключается в том, что изображение отображается слева от границы. Я хочу, чтобы он был в центре и подходил к границе. Когда я предоставляю угол, я хочу, чтобы он вращался внутри границы.

 <Grid Background="gray" HorizontalAlignment="Right" Width="36" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="auto"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="auto"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 

      <Line Grid.Column="0" X1="0" X2="0" Y1="0" Y2="500" Fill="Black" Stroke="Black" StrokeThickness="7" StrokeDashArray="0.5 0.5" 
       /> 
      <Border Grid.Column="1" Background="DarkGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 


       <Image Source="pack://application:,,,/WpfApplication3;component/Resources/MyImage.png"> 
        <Image.RenderTransform > 
         <RotateTransform Angle="45" /> 
        </Image.RenderTransform> 
       </Image > 



      </Border> 
      <Line Grid.Column="2" X1="0" X2="0" Y1="0" Y2="5000" Fill="Black" Stroke="Black" StrokeThickness="7" StrokeDashArray="0.5 0.5" 
       /> 

     </Grid> 

Пожалуйста, помогите

Answer 1

Вы можете использовать CenterX и CenterY свойства RotateTransform установить центр вращения. Если вам нужно изображение, чтобы увеличить размер рамки при вращении, вам нужно использовать LayoutTransform.

Например, это может быть сделано как:

 <Border> 
      <Image Source="pack://application:,,,/WpfApplication3;component/Resources/MyImage.png" x:Name="image"> 
       <Image.RenderTransform > 
        <RotateTransform 
         Angle="45" 
         CenterX="{Binding ElementName=image, Path=ActualWidth, Converter={StaticResource ResourceKey=DivideBy2Converter}}" 
         CenterY="{Binding ElementName=image, Path=ActualHeight, Converter={StaticResource ResourceKey=DivideBy2Converter}}" 
         /> 
       </Image.RenderTransform> 
      </Image > 
     </Border> 

Edit: Возьмите ActualSize изображения, не граничат

Answer 2

Установите RenderTransformOrigin свойство в центре изображения. RenderTransformOrigin использует относительные координаты, следовательно, центр находится в 0.5,0.5:

<Border ClipToBounds="True"> 
    <Image ... RenderTransformOrigin="0.5,0.5"> 
     <Image.RenderTransform> 
      <RotateTransform Angle="45"/> 
     </Image.RenderTransform> 
    </Image> 
</Border> 

Для того, чтобы соответствовать повернутого изображения в управлении границами, вы можете установить его LayoutTransform:

<Border> 
    <Image ...> 
     <Image.LayoutTransform> 
      <RotateTransform Angle="45"/> 
     </Image.LayoutTransform> 
    </Image> 
</Border> 

Answer 3

Я хотел сделать изображение аналогично часовому рычагу. Учитывая угол, он просто отобразит его. Проблема заключалась в том, что изображение не растягивалось на 120 или 160, а рука стала короче.

я, наконец, достигается путем создания прямоугольника и расчета рентабельности и CenterY

 <Rectangle 
    Stroke="yellow" Fill="Yellow"> 
      <Rectangle.Margin> 
       <MultiBinding Converter="{StaticResource MarginConverter}"> 
        <MultiBinding.Bindings> 
         <Binding ElementName="border" Path="ActualWidth"/> 
         <Binding ElementName="border" Path="ActualHeight"/> 
        </MultiBinding.Bindings> 
       </MultiBinding> 
      </Rectangle.Margin> 
      <Rectangle.RenderTransform> 
       <RotateTransform CenterX="0" 
      CenterY="{Binding ElementName=border, Path=ActualHeight, Converter={StaticResource CalculateRectCenterY}}" Angle="120" /> 
      </Rectangle.RenderTransform> 
     </Rectangle> 

сообщение

Михала Żochowski дал мне идею, хотя его ответ не решить мне проблему именно