Silverlight+WCF 新手實例 象棋 棋子移動-線交叉點(六)

上一節，我們給棋子賦於了鼠標點擊事件，並通過故事板Storyboard 來移動棋子，同時實現了吃棋子。

現在我們在實現鼠標在棋盤上點擊，然後棋子就移動到那去。

好了，鼠標在棋盤上點擊，這裏要爲點擊的棋盤，其實就是最外面那個Panel容器啦，還是加上一個MouseLeftButtonDown事件。

我們回到Chess類，因爲這裏是第一手Canvas傳進來的地方，我們在Chess的構造函數裏，爲Panel添加這一事件

  public  Chess(Panel control)
        {
            control.MouseLeftButtonDown  +=   new  MouseButtonEventHandler(control_MouseLeftButtonDown); // 新加的
            container  =  control;
            ChessmanList  =   new  List < Chessman > ( 32 );
            Action  =   new  ChessAction( this );
        }

         void  control_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
        {
            MessageBox.Show( " 我是棋盤，你點中我了，我的座標是： "   +  e.GetPosition( null ).X + " , "   +  e.GetPosition( null ).Y);
        }

OK，按F5運行，效果就出來了，隨便找個地方點擊，效果圖如下,爲了突出點，這裏給Canvas弄上了綠色背景：

這裏有幾點注意：

1。外部的Canvas必須有背景色，如果沒有背景色，點擊事件是無效的。

2。加上背景色後，我們發現，能點擊的範圍太大，我們只要像棋盤那麼寬和高的範圍就夠了。於是我們回到棋盤Board類的DrawIn函數裏，順便把容器的寬高都給加上了。

public   void  DrawIn(Panel control)
        {
            Width  =  gap  *   9   +  marginLeft;
            Height  =  gap  *   10   +  marginTop;
            container  =  control;
            container.Width  =  Width; // 設置寬
            container.Height  =  Height; // 設置高
            Draw();
        }

OK，再運行，看看效果，背景範圍正好合適了。

OK，有了點擊事件我們並可以獲取到點擊的點所在的座標，可是我們點擊的座標，不一定是精確在點上的，所以咋辦呢？

如果是吃棋子好說，因爲吃棋子可以通過被吃的棋子就可以獲取到棋子的精準座標。

那這裏我們咋麼能精準的定位到線交叉點上呢？？

沒的說咋辦，加個函數進行修正了。

於是一個在Chess類中的修正點座標函數產生了：

///   <summary>
         ///  修正像素並轉成座標
         ///   </summary>
         public  Point FixPoint(Point point)
        {
            Point fixPoint  =   new  Point();
            fixPoint.X  =  Math.Round((point.X  -  Board.marginLeft)  /  Board.gap);
            fixPoint.Y  =  Math.Round((point.Y  -  Board.marginTop)  /  Board.gap);
             return  fixPoint;
        }

看，很簡單吧，首先把點減去margin的，然後剩下的除以棋盤間隔，最後四捨五入就行了。

OKOK，有了修正點座標，我們回去修改下那個點擊事件，讓它調用ChessAction的MoveTo方法移動吧

void  control_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
        {
             // MessageBox.Show("我是棋盤，你點中我了，我的座標是：" + e.GetPosition(null).X+"," + e.GetPosition(null).Y);
             if  (e.OriginalSource  is  Canvas  ||  e.OriginalSource  is  Line)
            {
                Chessman chessman  = ReadyMoveChessman;
                 if  (chessman  !=   null )
                {
                    Point fixPoint  =  FixPoint(e.GetPosition( null ));
                     Action.MoveTo(chessman, fixPoint);
                   
                }
            }
        }

OK,F5運行，移動棋子。。效果圖上來:

哇哇~~的叫，笨來是想移動到棋盤中的，誰知道自己跑到外面去了。

於是又小研究了一下，又是相對座標惹的禍了，看，棋盤默認跑中間去了，不是靠左和靠頂對齊的。

我們回到Silverlight應用程序中，找到那個Canvas容器，把它的水平對齊設置爲Left,垂直對齊設置爲Top，

當然啦，也可以通過代碼設置屬性值了。

然後看看效果：

OKOK，這個是正常了，我們讓棋子移到了指定的位置上去了。

下一節，我們爲棋子增加規則，讓它們不能隨意移動，得按規則來辦事。

作者博客：http://cyq1162.cnblogs.com/