マウス移動イベントで画像を回転

Question

私はマウス移動イベントでディスクを移動するのが難しいと感じるスタイルのようなターンテーブルを実現しようとしています。

この私のXAMLコード

<!-- Disk rotating code --> 
     <StackPanel x:Name="disk" Margin="0,-60,0,0"> 
      <StackPanel.Resources> 
       <Storyboard x:Name="myStoryboard"> 
        <DoubleAnimation Storyboard.TargetName="myTransform" 
            Storyboard.TargetProperty="Angle" 
            From="0" To="360" Duration="0:0:5" 
            RepeatBehavior="Forever"> 
        </DoubleAnimation> 
       </Storyboard> 
      </StackPanel.Resources> 
      <Rectangle x:Name="ttbg" Margin="5,200,30,0" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.503,0.503" Height="420" Width="420" MouseLeftButtonDown="press_down" MouseLeftButtonUp="press_up" MouseMove="press_move" > 
      <Rectangle.Fill> 
        <ImageBrush ImageSource="Images/ttbg.png" Stretch="Uniform" /> 
      </Rectangle.Fill> 
       <Rectangle.RenderTransform> 
        <TransformGroup> 
         <RotateTransform x:Name="myTransform" /> 
        </TransformGroup> 
       </Rectangle.RenderTransform> 
      </Rectangle> 
     </StackPanel> 

これは私のC＃のコードである

private void press_down(object sender, System.Windows.Input.MouseButtonEventArgs e) 
    { 
     // TODO: Add event handler implementation here. 

    } 

    private void press_up(object sender, System.Windows.Input.MouseButtonEventArgs e) 
    { 
     // TODO: Add event handler implementation here. 
    } 

    private void press_move(object sender, System.Windows.Input.MouseEventArgs e) 
    { 
     // TODO: Add event handler implementation here. 

    } 

質問初心者から

Answer 1

これは少しトリッキーであり、いくつかのコーディングが必要です。しかし、私はそれを試してみましょう。

最初に、使用したStackPanelの代わりにCanvasを使用するようにXAMLを変更しました。この場合、私はCanvasを好むので、ターンテーブルの中心が正確にわかるように絶対座標を使ってターンテーブルイメージを配置することができます。 XAMLは次のようになります。

<UserControl x:Class="TurnTable.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="400" 
    > 

    <Canvas x:Name="LayoutRoot" Background="White"> 
     <!-- Disk rotating code --> 
     <Canvas.Resources> 
      <Storyboard x:Name="myStoryboard"> 
       <DoubleAnimation x:Name="angleAnimation" Storyboard.TargetName="myTransform" 
            Storyboard.TargetProperty="Angle" 
            From="0" To="0" Duration="0:0:1" 
            > 
        <DoubleAnimation.EasingFunction> 
         <CubicEase /> 
        </DoubleAnimation.EasingFunction> 
       </DoubleAnimation> 
      </Storyboard> 
     </Canvas.Resources> 
     <Rectangle x:Name="ttbg" Canvas.Left="100" Canvas.Top="100" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.5,0.5" Height="420" Width="420" MouseLeftButtonDown="press_down" MouseLeftButtonUp="press_up" MouseMove="press_move" > 
      <Rectangle.Fill> 
       <ImageBrush ImageSource="Images/ttbg.png" Stretch="Uniform" /> 
      </Rectangle.Fill> 
      <Rectangle.RenderTransform> 
       <TransformGroup> 
        <RotateTransform x:Name="myTransform" /> 
       </TransformGroup> 
      </Rectangle.RenderTransform> 
     </Rectangle> 
    </Canvas> 
</UserControl> 

はまた、私はストーリーボードに1秒の時間を与え、私はアニメーションに素敵な外観を与えると感じるためにそれをEasingFunctionを与えたことに注意してください。

私はMath.Atanを使って、マウスの動きに合わせてターンテーブルを回転させる角度を計算しています。私はMath.Atanにフィードする値を決定するためにターンテーブルの中心に対するマウスの座標を使用しています。

namespace TurnTable 
{ 
    public partial class MainPage : UserControl 
    { 
     Point _centerOfTurnTable; 
     Point _startMousePosition; 
     Point _lastMousePosition; 
     bool _isMouseCaptured = false; 
     double _deltaAngle; 

     public MainPage() 
     { 
      InitializeComponent(); 
     } 

     private void press_down(object sender, System.Windows.Input.MouseButtonEventArgs e) 
     { 
      _centerOfTurnTable = new Point 
      (
       Canvas.GetLeft(ttbg) + ttbg.ActualWidth/2d, 
       Canvas.GetTop(ttbg) + ttbg.ActualHeight/2d 
      ); 

      myStoryboard.Pause(); 

      _startMousePosition = e.GetPosition(this); 
      _isMouseCaptured = true; 
      _lastMousePosition = _startMousePosition; 
     } 

     private void press_up(object sender, System.Windows.Input.MouseButtonEventArgs e) 
     { 
      if (_isMouseCaptured) 
      { 
       _isMouseCaptured = false; 

       angleAnimation.From = myTransform.Angle; 
       angleAnimation.To = myTransform.Angle + _deltaAngle * 100; 
       _deltaAngle = 0; 
       myStoryboard.Begin(); 
      } 
     } 

     private void press_move(object sender, System.Windows.Input.MouseEventArgs e) 
     { 
      Point currentMousePosition = e.GetPosition(this); 
      if (_isMouseCaptured && Math.Abs(currentMousePosition.X - _centerOfTurnTable.X) > 5) 
      { 
       _deltaAngle = GetAngleDelta(currentMousePosition); 

       myTransform.Angle += _deltaAngle; 
       _lastMousePosition = currentMousePosition; 
      } 
     } 

     private double GetAngleDelta(Point currentMousePosition) 
     { 
      double lastAngleDegrees = GetAngleDegrees(_lastMousePosition); 
      double newAngleDegrees = GetAngleDegrees(currentMousePosition); 

      if (Math.Sign(lastAngleDegrees) != Math.Sign(newAngleDegrees)) 
      { 
       lastAngleDegrees = newAngleDegrees; 
      } 
      double delta = newAngleDegrees - lastAngleDegrees; 
      return delta; 
     } 

     private double GetAngleDegrees(Point position) 
     { 
      return 180d/Math.PI * Math.Atan((position.Y - _centerOfTurnTable.Y)/(position.X - _centerOfTurnTable.X)); 
     } 
    } 
} 

コードを使用すると、ターンテーブルを回すことを可能にすると、マウスを押し下げたときにアニメーションがターンテーブルがゆっくりと素敵なタッチを与える完全に停止に来ることができるように開始されます。コードは次のように見て終わります。