一起谈.NET技术，Silverlight 游戏开发小技巧：扇形排列元素

傷城~ 2021-12-15 22:57 157阅读 0赞

斗地主风靡了大江南北，在春晚都做免费性推广，棋牌游戏平台几乎将其作为标配，但是牌类游戏总是一成不变的样子——横向排列，如果扇形排列应该更加符合真实，最近在WP7上玩了一个UNO游戏就是用扇形排列，感觉很不错，今天咱们照猫画虎，在Silverlight上实现一个扇形的手牌效果。

[![0][]][0 1]　　可能看到这个预览图有的朋友就会笑了，这个可以使用RenderTransform实现，前面有讲过，只需要将RenderTransformOrigin的原点设置在牌外面就行，然后旋转，这样实现倒是可以，可是算起来实在麻烦，要考虑牌数和位置，今天不是炒冷饭，而是使用PathListBox来实现，PathListBox在Silverlight的标准SDK中是没有的，它是Blend的一个扩展控件，用来实现路径动画等效果。

现在先建立一张牌的控件，这次不用新建，首先在画布上画好，如下图：

[![1][]][1 1]　　选择绘制出来的元素，点击鼠标右键选择制作成用户控件的选项：

[![2][]][2 1]　　输入一个名字：

[![3][]][3 1]　　这样就会制作好了一个自定义的控件，此做法可以省去定大小等麻烦，如下图：

[![4][]][4 1]　　现在我们添加一个用户自定义控件到MainPage看看效果，你需要在Asset（资产）中找到这个用户控件，如果没有则需要编译一下：Ctrl+Alt+B

[![5][]][5 1]　　现在绘制一个圆形，在工具中选择Ellipse：

[![6][]][6 1]　　看好规定好的路径，绘制好位置之后，将这个圆形变成Path路径，然后在工具栏中选择Direct Selection，选择下面的两条线，这两条线是我们所不需要的，所以直接按Del按钮删除掉：

[![7][]][7 1]　　只剩下一个将要作为路径的Path：

[![8][]][8 1]　　选定Path，点击鼠标右键选择制作成为Layout Path功能，这个其实是一个快捷方式，如果正常操作需要引用dll然后添加对应的控件，我这里以简单的方式完成：

[![9][]][9 1]　　PathListBox此时就会出现在布局中了，并且下面的Path也添加到PathListBox做路径的基础。

[![10][]][10 1]　　现在拖动Card控件到PathListBox中，你会发现牌已经到了最开始的点了：

[![11][]][11 1]　　下面选定PathListBox，把参数设置成如下：

[![12][]][12 1]　　现在复制几个Card出来看看效果吧，怎么样，很不错吧。

[![13][]][13 1]　　但是这个排列仍然觉得别扭，调整Path就可以达到你的目标，可是有更好的方法来解决，把参数调整成下面的参数：

[![14][]][14 1]　　就是说开始的点在30%，而结束的点在40%，你可以动态调整一下，看看效果，非常棒，弄成动画就更有意思了：）

最后把黑线去掉，这样看起来就更加自然了：

[![15][]][15 1]　　选择Path把Stroke的颜色画笔设置为没有。

好了现在已经完成，我为Card做了一个小动画看起来更加有趣，在这个小技巧的基础上，相信各位能扩展更多的玩法出来，今天就到此为止吧：）

本篇工程源代码下载地址如下：[点击直接下载][Link 1]

转载于:https://www.cnblogs.com/waw/archive/2011/09/02/2162995.html

[0]: /images/20211215/854fcbe26d5a4c2d93c2458d768f73d5.png
[0 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327367576.jpg
[1]: /images/20211215/1801cb4e4a184c488d9e0a891d8d27e2.png
[1 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327373299.jpg
[2]: /images/20211215/264e07944cf64f1aba61626b7d3c6703.png
[2 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327393134.jpg
[3]: /images/20211215/efa9e51fa5c342bda0785670fd022448.png
[3 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327394148.jpg
[4]: /images/20211215/509d8782dd064b428ea17befad604659.png
[4 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327403559.jpg
[5]: /images/20211215/708a8dc710dd45b1935d619caf094c6f.png
[5 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327419523.jpg
[6]: /images/20211215/d3b768ccbad64634ad8b9379b318e4f5.png
[6 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327413394.jpg
[7]: /images/20211215/f330383161ce47b3b710a20cbc0bb037.png
[7 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327435213.jpg
[8]: /images/20211215/460122a783df494487b77a5d502fb586.png
[8 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327439815.jpg
[9]: /images/20211215/fe2cde71ff844a6c87101e0d7ab976e6.png
[9 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327447274.jpg
[10]: /images/20211215/efcc0d0df12c42d4b6acfff8c4e48a9e.png
[10 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327445572.jpg
[11]: /images/20211215/1cc60254626d4c77bf5183af754c7588.png
[11 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327458570.jpg
[12]: /images/20211215/373014453f844422b32f9c975f94e01f.png
[12 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327455473.jpg
[13]: /images/20211215/ad5ef914114a47f1b36b8ad7045b98ea.png
[13 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327466977.jpg
[14]: /images/20211215/ec198d7ba3724509b04b9ee36de21200.png
[14 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327484336.jpg
[15]: /images/20211215/aa524de7e5be4dd999ace864e31ff98e.png
[15 1]: http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102141327499188.jpg
[Link 1]: http://files.cnblogs.com/nowpaper/Sectoring.rar