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/

Silverlight+WCF 新手实例象棋棋子移动-线交叉点(六)相关推荐

Silverlight+WCF 新手实例象棋棋子移动-规则[附加上半盘限制](十)
上上一节,我们对棋子的下半盘棋子做了所有的规则限制,因为我们下棋的总是用下半盘的棋子来下,总没人用上半盘棋来下那么高境界的吧. 不过这节简单追加点代码,让那些企图高境界的人士可以临时性的自己和自己下. ...
Silverlight+WCF 新手实例象棋棋子移动-规则[兵、车](七)
上两节实现了棋子的两种走法,吃子和没移动到线交叉点.不过我们都是没有规则的走,这节为棋子的走法增加规则,棋的规则我就不多说了,基本要找个不会下象棋的很难,就是找到的估计也不会看这文章. 当我们移动棋子 ...
Silverlight+WCF 新手实例象棋棋子定位与象棋类(四)
上节创建显示了一颗棋子,由于没有margin属性,所以只能靠边站. 现在,我们创建一个象棋类,让它包括棋盘和棋子,同时附加几个常用函数. 还是对着Silverlight类库项目右键添加类:Chess. ...
Silverlight+WCF 新手实例象棋棋子(三)
2019独角兽企业重金招聘Python工程师标准>>> 棋盘上有棋子,棋子应该还有一些属性,按原始冲动新建一个棋子类. 上google翻译下棋子E文叫什么,查到了叫Chessman, ...
Silverlight+WCF 新手实例象棋棋子移动-规则[将、马、士、相、炮](八)
这节来完成剩下五个种子的规则. 先来将吧将:只能走一步,而且只能在九宫内行走看代码,还是和兵的一个样. if (Math.Abs(y2 - y1) + Math.Abs(x2 - x ...
Silverlight+WCF 新手实例象棋主界面-棋谱-获取列表(三十八)
2019独角兽企业重金招聘Python工程师标准>>> 在线演示地址:Silverlight+WCF 新手实例象棋在线演示在Silverlight+WCF 新手实例象棋主界 ...
Silverlight+WCF 新手实例象棋该谁下棋-B下A停(三十)
2019独角兽企业重金招聘Python工程师标准>>> 在线演示地址:Silverlight+WCF 新手实例象棋在线演示上上一节,就是二十八节:Silverlight+WCF ...
Silverlight+WCF 新手实例象棋主界面-棋谱-回放-结局(四十)
在线演示地址: Silverlight+WCF 新手实例象棋在线演示在Silverlight+WCF 新手实例象棋主界面-棋谱-回放(三十九)中,我们实现了用户的棋谱回放,在文章的下面,我们 ...
Silverlight+WCF 新手实例象棋主界面-棋谱-回放(三十九)
在线演示地址:Silverlight+WCF 新手实例象棋在线演示本节完后,同时会更新Silverlight+WCF 新手实例象棋专题索引,并顺路提供第八阶段源码在Silverlight+ ...

Silverlight+WCF 新手实例象棋棋子移动-线交叉点(六)

Silverlight+WCF 新手实例象棋棋子移动-线交叉点(六)相关推荐

最新文章

热门文章

Silverlight+WCF 新手实例 象棋 棋子移动-线交叉点(六)

Silverlight+WCF 新手实例 象棋 棋子移动-线交叉点(六)相关推荐

最新文章

热门文章

Silverlight+WCF 新手实例象棋棋子移动-线交叉点(六)

Silverlight+WCF 新手实例象棋棋子移动-线交叉点(六)相关推荐