當麻許

兼任的偽善者,職業的詐欺師,part-time的故事家,業餘的code generator,不服輸的夢想家,長不大的幼稚鬼,Facebook超自然現象研究社社長,堅持對我來說 就是以剛克剛。
文章數 - 348, 回應數 - 670, 引用數 - 0








 

Get Microsoft Silverlight



MSN :


Email :

 
 

文章標籤

全部標籤

每月文章

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

 

最近朋友問我這問題..

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

 

用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

 

讚一下:

 

效果預覽:

 

 

檔案下載:

 

 

 


 

推一下 :

 
 

請你暫時把你的勇氣給我 在夢想快消失的時候 讓我的 Code 用力的穿過天空 為愛我的人做一秒英雄 如果這篇文章有幫助到您,簡單留個言,或是幫我按個讚,讓我有寫下去的動力...

Creative Commons License
程式. 生活.D 小調 by 當麻許 is licensed under a Creative Commons Attribution-ShareAlike License.


Author:  

 



DotBlogs Tags: Silverlight 視覺設計

posted on 2010/10/22 14:38 我要推薦 | 閱讀數 : 8810 訂閱

關連文章

Feedback

目前沒有回應.

回應

標題
姓名
電子郵件 (將不會被顯示)
個人網頁
內容 
  登入後使用進階評論  
Please add 8 and 1 and type the answer here:

Powered by: