[Silverlight] 抓滑鼠座標並兩點計算角度

2010/10/26

最近朋友問我這問題..
這問題好像不管走到哪都很容易遇到..尤其是作旋轉效果的時候..

用Silverlight 實作一次好了..
如果有各位先進知道更好的方法可以指教一下..^^..

介紹一下版面配置…
sshot-74


XAML Code :

<UserControl x:Class="CalcAngle.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="500" d:DesignWidth="500" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" >

    <Grid x:Name="LayoutRoot" Background="Black" Width="500" Height="500" MouseMove="LayoutRoot_MouseMove">
        <Ellipse Height="10" HorizontalAlignment="Left" Margin="245,245,0,0" Name="ellipse1" Stroke="Red" StrokeThickness="5" VerticalAlignment="Top" Width="10" />
        <sdk:Label Height="28" HorizontalAlignment="Left" Margin="12,460,0,0" Name="lblLogAngle" VerticalAlignment="Top" Width="292" Foreground="White" Content="-" />
        <sdk:Label Height="28" HorizontalAlignment="Left" Margin="196,12,0,0" Name="lblMousePosition" VerticalAlignment="Top" Width="292" Content="-" Foreground="White" />
    </Grid>
</UserControl>

其中要注意的..
我放了一個小紅點因為她的長寬 是10x10 所以我把它放在 (245,245) 的位置..所以 這樣那紅點會在正中央…

這時候我們得靠一個公式…

來換算角度 我先製作一個function
/// <summary>
/// 計算 targetPoint 之於 soucePoint 的相對角度
/// </summary>
/// <param name="soucePoint">基準點</param>
/// <param name="targetPoint">觀測點</param>
/// <returns></returns>
private double ConvertPositionAngel(Point soucePoint,Point targetPoint)
{
  var res=(Math.Atan2(targetPoint.Y-soucePoint.Y,targetPoint.X-soucePoint.X)) / Math.PI * 180.0;
  return (res>=0 && res <=180)?res+=90:((res<0 && res>=-90)? res+=90: res+=450);
}

因為我之前在ActionScript 還有 Javascript 寫過…
Javacript 可以參考這篇 [Javscript] 計算兩點角度

接下來我們在LayoutRoot 加入一個 MouseMove 事件…
Code 如下:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
    this.lblMousePosition.Content = "你滑鼠於LayoutRoot座標是 (" + e.GetPosition(this.LayoutRoot).X + "," + e.GetPosition(this.LayoutRoot).Y + ")";
    this.lblLogAngle.Content = "滑鼠對於中心點角度是" + ConvertPositionAngel(new Point(250, 250), e.GetPosition(this.LayoutRoot));
}

其中要注意的 透過  e.GetPosition 可以取得 滑鼠在那一個物件中的座標位置是….
所以透過上述的公式去計算角度…

所以當 滑鼠移到 (436,250) 的時候 角度為 90度
sshot-75

讚一下:


效果預覽:


檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.