使用XAML创建自定义图形

使用XAML创建自定义图形

不知道你在WPF之前是否绘制自己的形状，如果没有，这原本是件很困难的事情。在WPF 中绘制形状，不想需要重写OnPaint方法或添加Paint监听器。你可以简单的创建一个图形就像放置任何对象到你想要的位置。

为了使用XAML和WPF，你可能需要Visual Studio 2008或Expression Blend 2。你可以从/express/下载Visual Studio的Express Edition免费版本，或你可以从

/expression/products/Overview.aspx?key=bl end获得Expression Blend的使用版本（悲哀呀，Expression产品没有免费版本）。

让我们从简单示例开始。我喜欢的一个游戏是俄罗斯方块，这里是一个俄罗斯方块的形状。

这这里面包含许多东西，但我们唯一关心的是Path对象和它的Data属性。当创建自定义图像时Path是非常有用的，这也是使用它们来画图。

通过Data属性定义形状。这个语法有点怪，但如果你习惯了这种写法，你会发现比以前的方式更有效。如果你使用过其他语言绘制图形，你可能熟悉命名像lineTo、moveTo、arcTo 等的函数。WPF用一个包含特殊符号的长的字符串来替代这些方法。在这个示例中，“L”表示lineTo，“M”表示moveTo。下面的图像显示每个字符串表示什么图形块。

正如你所见，我的图形是从“M 0, 0”开始。我笔的位置在形状的左上角。可以在任何你想的地方开始我们的图形，但（0, 0）是俄罗斯方块的开始。下一块，“L 200, 0”从我们的开始位置（0, 0）话了一条直线，这个特殊的点（200, 0）以“L”开头。当你画一条线到另一点，任何后续的点都是从上一个位置开始。为了简单，我继续使用“L”命令画线知道我的图形完成。在上面的Data字符串最后一个字符“Z”–说明这个图形的路径

完成。

在WPF中有像“M”，“L”和“Z”一样的更多命令。在这里不一一讨论他们，可以冲MSDN 中的一篇好文章Path Markup Syntax

（/en-us/library/ms752293.aspx）获得有关它们的详细介绍。

好吧，我认为我们已经可以绘制直线了。现在让我们来看看稍微负责点的图形–曲线。WPF 有许多不同类型的曲线–二次贝塞尔曲线，平滑三次贝塞尔曲线，平滑二次贝塞尔曲线和椭圆弧。是的，我不知道他们是什么，但在MSDN文中中我注意到在最后的段落中有关于他们的解释。如果你真的真的想知道更多，可以点击维基百科中关于贝塞尔曲线的文章（/wiki/B%C3%A9zier_curve）。

这里是在顶部和底部具有圆弧的俄罗斯方块。代码如下所示：

对于这条曲线，我用的是椭圆弧。基本上，所有的椭圆弧在当前点和特定的结束点画一个圆弧。弧的选项（按字符串顺序）有：ArcSize

（/en-us/library/system.windows.media.ar csegment.rotationangle.aspx）、RotationAngle

（/en-us/library/system.windows.media.ar csegment.rotationangle.aspx）、IsLargeArc

（/en-us/library/system.windows.media.ar csegment.islargearc.aspx）、SweepDirection

（/en-us/library/system.windows.media.ar csegment.sweepdirection.aspx）和结束点。在MSDN关于画椭圆的文中有关于每个属性的解释，因此这里不重复。正如你看到的，画一条曲线和或一条直线没有太多的不同–仅仅多了几个选项。

我认为仅仅是没有自定义图形。使用直线和椭圆线，可以画任何想要的图形。当然，这有许多不同的路径选择，你应该探索如何让你的图形像你所希望的。

代码附件：/s/1pKx7tzX