使用鼠标移动事件旋转图像
使用鼠标移动事件旋转图像
提问于 2011-07-14 20:44:24
我正在尝试实现一种转盘风格，我发现很难用鼠标移动事件来移动磁盘。
这是我的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.
}新手提出的问题
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-07-19 06:12:40
这有点棘手，需要一些编码。但我会试一试。
首先，我已经更改了您的XAML，以便我将使用Canvas而不是您使用的StackPanel。在这种情况下，我更喜欢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));
}
}
}代码允许您旋转转盘，当按下鼠标时，将启动一个动画，允许转盘慢慢停止，这给了它一个很好的触摸。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6693319
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号