2019独角兽企业重金招聘Python工程师标准>>>

1.先新建一个和棋子相关的类库

打开VS2010后->新建->项目->Silverlight类库,名称就定为"ChessLib"

新建一个类名为Board.cs，棋盘类

棋盘类

using  System;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Ink;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;

namespace  ChessLib
{
    
     ///   <summary>
     ///  棋盘
     ///   </summary>
     public   class  Board
    {
    }
}

乱七八糟：

由于继承自VS2005的想法，要画棋盘就是画线了，画线就要找GDI+了。于是在类里找什么DrawLine之类的，

结果什么Draw都找不到,找到WPF有的，Silverlight里也是没有的。

最后，画线还是得用Line控件,然后找个画布Add进去。

画线的控件后台生成的代码就是赋几个属性了:

代码

Line line  =   new  Line()
            {
                X1  =  x1,
                Y1  =  y1,
                X2  =  x2,
                Y2  =  y2,
                Stroke  =   new  SolidColorBrush(Colors.Black),//线的颜色
                StrokeThickness  =   1//线的粗细
            };

按原始人冲动的想法，封闭个Line函数出来，传入几个点，生成一条线,还得加上一个画布。

原始代码就变成了

public   class  Board
    {
        Panel container;
         private   void  DrawLine( double  x1,  double  y1,  double  x2,  double  y2)
        {
            Line line  =   new  Line()
            {
                X1  =  x1,
                Y1  =  y1,
                X2  =  x2,
                Y2  =  y2,
                Stroke  =   new  SolidColorBrush(Colors.Black),
                StrokeThickness  =   1
            };
            container.Children.Add(line);
        }
    }

有了画线函数，我们要想想棋盘里有多少条线了。

于是我们再看看象棋的图片：

数一数了，10条横线，9条直线。还有两个X线。如果棋子移走后，还能发现有一些点的修饰线(_| |_)像这种的。

于是冲动的就又要弄个函数来画线了

代码

  private   void  Draw()
        {
             // 画横线
             for  ( int  i  =   0 ; i  <   10 ; i ++ )
            {
                DrawLine( 0 , i,  8 , i);
            }
             // 画7条直线，两边另外补
             for  ( int  j  =   1 ; j  <   8 ; j ++ )
            {
                DrawLine(j,  0 , j,  4 );
            }
             for  ( int  k  =   1 ; k  <   8 ; k ++ )
            {
                DrawLine(k,  5 , k,  9 );
            }
        }

由于棋盘中间有河界分隔，直线就不能直接从上到下了，于是分开两个for来循环了。左右两边两条是链接着的，我们另外补上了。

其实，看了棋盘，就知道棋盘的每条线都有间隔的，而且间隔后的宽和高都是一样的。这样我们就会想加多一个变量来表示了： public  int gap = 50;

我们的for里，传的都是点1.2.3.4.5，生成后，线都靠在一起的，所以还得加上个间隔隔开一下。

一开始呢DrawLine(k*gap, 5*gap, k*gap, 9*gap);的传，于是重复的多了，发现直接把gap都拉到函数里面就行了。

于是目前的代码就变成了下面的了[这里加了一个DrawIn方法，用于外面调用，同时为棋盘增加宽和高属性]：

  public   class  Board
    { 
         ///   <summary>
         ///  棋盘隔宽
         ///   </summary>
         ///  
         public   int  gap  =   50 ;
         public   double  Width
        {
             get ;
             set ;
        }
         public   double  Height
        {
             get ;
             set ;
        }
        Panel container;
         public   void  DrawIn(Panel control)
        {
            Width  =  gap  *   9 ;
            Height  =  gap  *   10 ;
            container  =  control;
            Draw();
        }
         private   void  DrawLine( double  x1,  double  y1,  double  x2,  double  y2)
        {
            Line line  =   new  Line()
            {
                X1  =  x1  *  gap,
                Y1  =  y1  *  gap,
                X2  =  x2  *  gap,
                Y2  =  y2  *  gap,
                Stroke  =   new  SolidColorBrush(Colors.Black),
                StrokeThickness  =   1
            };
            container.Children.Add(line);
        }
         private   void  Draw()
        {
             // 画横线
             for  ( int  i  =   0 ; i  <   10 ; i ++ )
            {
                DrawLine( 0 , i,  8 , i);
            }
             // 画7条直线，两边另外补
             for  ( int  j  =   1 ; j  <   8 ; j ++ )
            {
                DrawLine(j,  0 , j,  4 );
            }
             for  ( int  k  =   1 ; k  <   8 ; k ++ )
            {
                DrawLine(k,  5 , k,  9 );
            }
        }

好了，新建一个SilverLight应用程序，添加引用这个类库，实例Board board=new Board(); board.DrawIn(Canvas画布的ID);

可以看到界面线已有几条线了来了。

两边还没有线，我们接着补上两边的线，然后是画两个XX，还有加上一些修饰线，棋盘就差不多完成了。

我们在Draw函数里加上以下代码：

   // 补上两边两条直线
            DrawLine( 0 , 0 , 0 , 9 );
            DrawLine( 8 , 0 , 8 , 9 );
             // 画交叉线
            DrawLine( 3 , 0 , 5 , 2 );
            DrawLine( 3 , 2 , 5 , 0 );
            DrawLine( 3 , 7 , 5 , 9 );
            DrawLine( 3 , 9 , 5 , 7 );

接下来麻烦一点的就是画修饰线了，像“炮”的位置四边都有8条修饰线。而兵的位置有两条

我仔细研究了下，两边的兵的修饰线+起来就是一个“炮”的修饰线，

于是多了三个函数：

private void DrawLineLeft2(double x, double y) //一个点，左边两个修饰线[4条]

private void DrawLineRight2(double x, double y)//一个点，右边两个修饰线[4条]

private void DrawLine4(double x, double y)//一个点，上下左右四个修饰线，里面就是左+右了

函数实现如下：

代码

  private   void  DrawLine4( double  x,  double  y)
        {
            DrawLineLeft2(x, y);
            DrawLineRight2(x, y);
        }
         private   void  DrawLineRight2( double  x,  double  y)
        {
            x  =  x  *  gap;
            y  =  y  *  gap;
             // 右两条直接
            DrawLine(x  +  minGap, y  -  minGap  *   2 , x  +  minGap, y  -  minGap);
            DrawLine(x  +  minGap, y  +  minGap  *   2 , x  +  minGap, y  +  minGap);

// 右两条横线
            DrawLine(x  +  minGap, y  -  minGap, x  +  minGap  *   2 , y  -  minGap);
            DrawLine(x  +  minGap, y  +  minGap, x  +  minGap  *   2 , y  +  minGap);
        }
         private   void  DrawLineLeft2( double  x,  double  y)
        {
            x  =  x  *  gap;
            y  =  y  *  gap;
             // 左两条直接
            DrawLine(x  -  minGap, y  -  minGap  *   2 , x  -  minGap, y  -  minGap);
            DrawLine(x  -  minGap, y  +  minGap  *   2 , x  -  minGap, y  +  minGap);
             // 左两条横线
            DrawLine(x  -  minGap  *   2 , y  -  minGap, x  -  minGap, y  -  minGap);
            DrawLine(x  -  minGap  *   2 , y  +  minGap, x  -  minGap, y  +  minGap);
        }

看到没有，代码里多了一个minGap，想想啦，那几个修饰线离那个点是有点距离的，所以多定义了这个小间隔。

private int minGap = 5;//修饰隔宽

于是我们还在Draw函数里加上这几个调用

// 画修饰线[炮]
            DrawLine4( 1 , 2 );
            DrawLine4( 1 , 7 );
            DrawLine4( 7 , 2 );
            DrawLine4( 7 , 7 );
             // 画修饰线[兵]
            DrawLine4( 2 , 3 );
            DrawLine4( 4 , 3 );
            DrawLine4( 6 , 3 );

DrawLine4( 2 , 6 );
            DrawLine4( 4 , 6 );
            DrawLine4( 6 , 6 );

DrawLineLeft2( 8 , 3 );
            DrawLineLeft2( 8 , 6 );
            DrawLineRight2( 0 , 3 );
            DrawLineRight2( 0 , 6 );

OK，到此，棋盘代码就完成了。运行一下。看下效果：

我们发现，这棋盘太靠边了，于是加上两个margin让它宽出来一下，完整类代码如下：

棋盘

///   <summary>
     ///  棋盘
     ///   </summary>
     public   class  Board
    {
         ///   <summary>
         ///  棋盘Left偏移量
         ///   </summary>
         public    int  marginLeft  =   50 ;
         ///   <summary>
         ///  棋盘Top偏移量
         ///   </summary>
         public    int  marginTop  = 50 ;
         ///   <summary>
         ///  棋盘隔宽
         ///   </summary>
         public    int  gap  =   50 ;
         private   int  minGap  =   5 ; // 修饰隔宽
        Panel container;
         public   double  Width
        {
             get ;
             set ;
        }
         public   double  Height
        {
             get ;
             set ;
        }
         public   void  DrawIn(Panel control)
        {
            Width  =  gap  *   9 + marginLeft;
            Height  =  gap  *   10 + marginTop;
            container  =  control;
            Draw();
        }
         private   void  Draw()
        {
             // 画横线
             for  ( int  i  =   0 ; i  <   10 ; i ++ )
            {
                DrawLine( 0 , i,  8 , i);
            }
             // 画7条直线，两边另外补
             for  ( int  j  =   1 ; j  <   8 ; j ++ )
            {
                DrawLine(j,  0 , j, 4 );
            }
             for  ( int  k  =   1 ; k <   8 ; k ++ )
            {
                DrawLine(k, 5 , k, 9 );
            }
             // 补上两边两条直线
            DrawLine( 0 , 0 , 0 , 9 );
            DrawLine( 8 , 0 , 8 , 9 );
             // 画交叉线
            DrawLine( 3 , 0 , 5 , 2 );
            DrawLine( 3 , 2 , 5 , 0 );
            DrawLine( 3 , 7 , 5 , 9 );
            DrawLine( 3 , 9 , 5 , 7 );
             // 画修饰线[炮]
            DrawLine4( 1 , 2 );
            DrawLine4( 1 , 7 );
            DrawLine4( 7 , 2 );
            DrawLine4( 7 , 7 );
             // 画修饰线[兵]
            DrawLine4( 2 , 3 );
            DrawLine4( 4 , 3 );
            DrawLine4( 6 , 3 );

DrawLine4( 2 , 6 );
            DrawLine4( 4 , 6 );
            DrawLine4( 6 , 6 );

DrawLineLeft2( 8 , 3 );
            DrawLineLeft2( 8 , 6 );
            DrawLineRight2( 0 , 3 );
            DrawLineRight2( 0 , 6 );
        }
         private   void  DrawLine( double  x1, double  y1, double  x2, double  y2)
        {
            Line line  =   new  Line()
            {
                X1  =  x1 * gap + marginLeft,
                Y1  =  y1  *  gap  +  marginTop,
                X2  =  x2  *  gap  +  marginLeft,
                Y2  =  y2  *  gap  +  marginTop,
                Stroke  =   new  SolidColorBrush(Colors.Black),
                StrokeThickness  =   1
            };
            container.Children.Add(line);
        }

private   void  DrawLine4( double  x,  double  y)
        {
            DrawLineLeft2(x, y);
            DrawLineRight2(x, y);
        }
         private   void  DrawLineRight2( double  x,  double  y)
        {
            x  =  x  *  gap;
            y  =  y  *  gap;
             // 右两条直接
            DrawLine(x  +  minGap, y  -  minGap  *   2 , x  +  minGap, y  -  minGap);
            DrawLine(x  +  minGap, y  +  minGap  *   2 , x  +  minGap, y  +  minGap);

// 右两条横线
            DrawLine(x  +  minGap, y  -  minGap, x  +  minGap  *   2 , y  -  minGap);
            DrawLine(x  +  minGap, y  +  minGap, x  +  minGap  *   2 , y  +  minGap);
        }
         private   void  DrawLineLeft2( double  x,  double  y)
        {
            x  =  x  *  gap;
            y  =  y  *  gap;
             // 左两条直接
            DrawLine(x  -  minGap, y  -  minGap  *   2 , x  -  minGap, y  -  minGap);
            DrawLine(x  -  minGap, y  +  minGap  *   2 , x  -  minGap, y  +  minGap);
             // 左两条横线
            DrawLine(x  -  minGap  *   2 , y  -  minGap, x  -  minGap, y  -  minGap);
            DrawLine(x  -  minGap  *   2 , y  +  minGap, x  -  minGap, y  +  minGap);
        }
    }

刚刚发现，几个修饰点没出来，发现是因为把gap移到了函数内部，而在画修饰的时候又传了*gap的值。

于是，我们简单修改一下Draw函数就可以了。判断传进点的数字来决定是不是*gap就可以了。

private   void  DrawLine( double  x1,  double  y1,  double  x2,  double  y2)
        {
             double  tempGap  =  (x1 + y1)  >   19   ?   1  : gap;
            Line line  =   new  Line()
            {
                X1  =  x1  *  tempGap  +  marginLeft,
                Y1  =  y1  *  tempGap  +  marginTop,
                X2  =  x2  *  tempGap  +  marginLeft,
                Y2  =  y2  *  tempGap  +  marginTop,
                Stroke  =   new  SolidColorBrush(Colors.Black),
                StrokeThickness  =   1
            };
            container.Children.Add(line);
        }

最后上传一张完整的图：

好了，本文到此结果，打完收工。

这里提示一下。那个窗口为什么用的Panel,因为我发现Grid还是Canvas都是继承自Panel，所以用了这个。

发现写的已经很新手了。

转载于:https://my.oschina.net/secyaher/blog/274350

Silverlight+WCF 新手实例 象棋 棋盘(二)相关推荐

  1. Silverlight+WCF 新手实例 象棋 主界面-事件区-求和认输(三十二)

    在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 事隔几篇,我们又回到事件区,继续其它两个按钮事件,来张图吧: 在Silverlight+WCF 新手实例 象棋 主界面-事件区- ...

  2. Silverlight+WCF 新手实例 象棋 主界面-实时聊天区(二十五)

    在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 演示已更新到此节介绍:Silverlight+WCF 新手实例 象棋 介绍III(二十三) 本节连着Silverlight+WC ...

  3. Silverlight+WCF 新手实例 象棋 该谁下棋-B下A停(三十)

    2019独角兽企业重金招聘Python工程师标准>>> 在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 上上一节,就是二十八节:Silverlight+WCF ...

  4. Silverlight+WCF 新手实例 象棋 主界面-棋谱-获取列表(三十八)

    2019独角兽企业重金招聘Python工程师标准>>> 在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 在Silverlight+WCF 新手实例 象棋 主界 ...

  5. Silverlight+WCF 新手实例 象棋 主界面-事件区-返回退出(三十三)

    在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 还是那张图: 本节实现返回大厅和退出系统: 一:返回大厅,其实很简单的说,就是转向房间列表了. 可是,转向前也有很多事情要处理的 ...

  6. Silverlight+WCF 新手实例 象棋 主界面-棋谱-回放-结局(四十)

    在线演示地址: Silverlight+WCF 新手实例 象棋 在线演示 在Silverlight+WCF 新手实例 象棋 主界面-棋谱-回放(三十九)中,我们实现了用户的棋谱回放,在文章的下面,我们 ...

  7. Silverlight+WCF 新手实例 象棋 棋子移动-规则[附加上半盘限制](十)

    上上一节,我们对棋子的下半盘棋子做了所有的规则限制,因为我们下棋的总是用下半盘的棋子来下,总没人用上半盘棋来下那么高境界的吧. 不过这节简单追加点代码,让那些企图高境界的人士可以临时性的自己和自己下. ...

  8. Silverlight+WCF 新手实例 象棋 主界面-棋谱-回放(三十九)

    在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 本节完后,同时会更新Silverlight+WCF 新手实例 象棋 专题索引,并顺路提供第八阶段源码 在Silverlight+ ...

  9. Silverlight+WCF 新手实例 象棋 棋子(三)

    2019独角兽企业重金招聘Python工程师标准>>> 棋盘上有棋子,棋子应该还有一些属性,按原始冲动新建一个棋子类. 上google翻译下棋子E文叫什么,查到了叫Chessman, ...

最新文章

  1. pbewithmd5anddes算法 对应.net_文本相似度算法之-simhash
  2. 研究：即便是最好的人脸识别算法也会受到口罩干扰
  3. [翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6
  4. Mysql游标循环遍历_MySQL数据库中，使用游标循环遍历
  5. 苹果7信号天线内部位置_新专利显示未来Apple Watch Wi-Fi及无线天线或将嵌入显示屏中...
  6. 计算机中的补码和反码都是二进制吗,计算机中数值型数据二进制形式存储过程中的原码，反码与补码...
  7. CSS 技巧tips1
  8. centos7子系统 win10_Win10下安装CentOS 7双系统详解
  9. CSS 元素超出部分滚动, 并隐藏滚动条
  10. Bailian2854 点和正方形的关系【水题】
  11. 若依可以商用吗_商用自动炒菜机Qamp;A，你想知道的都在这里！
  12. oracle和plsqldev的安装,win7x64下成功安装ORACLE客户端和PLSQLDEV!
  13. 【Django】 视图层说明
  14. Mac VScode 常用快捷键
  15. 原生js做一个简单的仿幻灯片放映
  16. 北理计算机学院毕设嗯开题报告,北理工德育论文开题报告(大学四年规划)
  17. 802.1X与portal的无线认证
  18. 自动化测试到底怎么做（单元测试自动化，接口自动化，UI自动化）
  19. Linux kfifo 源码分析
  20. 怎么把PDF转换成word而不乱码

热门文章

  1. varnish性能调优
  2. Maven详解（五）------ 坐标的概念以及依赖管理
  3. android:怎样用一天时间，写出“飞机大战”这种游戏！（无框架-SurfaceView绘制）...
  4. Javascript Java C++系列
  5. Java中的static
  6. 程序经编译连接后变为机器码
  7. 又一个不错的FCKeditor 2.2的安装、修改和调用方法
  8. xp与Linux双系统共存
  9. 2018-2019-2 网络对抗技术 20165324 Exp4：恶意代码分析
  10. Jmeter连接MySQL数据库