形状绘图

形状绘图

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015

作者：朱海恩

撰写时间：2019年6月10日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

形状绘图：

1. Shape是一个2D绘图类
2. Line直线
3. Rectangle矩形
4. Ellipse椭圆
5. Polygon多边形
6. Path路径

其中（2）-（6）是最常用的绘图对象，这些图形对象共有属性有：Stroke、StrokeThickness和Fill。

 

（2）直线

<Line X1="200" Y1="200" X2="300" Y2="200" Stroke="Red"></Line>

 

（3）矩形

<Rectangle Width="100" Height="100" Stroke="Red"></Rectangle>

     圆角矩形：圆角矩形是在矩形的代码下设置其X和Y轴的圆弧度就可以了

<Rectangle Width="100" Height="100" RadiusX="30" RadiusY="100"></Rectangle>

 

（4）椭圆

   <Ellipse Width="100" Height="100" StrokeThickness="2" Stroke="Red"></Ellipse>

 

（5）多边形：绘制多边形，其实很简单，就和数学坐标绘图差不多，都是找到想要的那几个点（X轴和Y轴），然后连接起来就可以了，比如三角形有三个点，那么想要绘制一个三角形就要绘制四个点，第一个点和最后一个点是相同的。

<Polygon Points="300,200 400,125 400,275 300,200" StrokeThickness="2" Stroke="Red"></Polygon>

（6）路径：

Path类可以绘制曲线和复杂形状。

Data属性使用了mimi-language，即路径标记语法。

路径标记语法：

移动命令：指定startPoint（绘图的起始点），用M或m表示，使用M时，表示绝对值，使用m时，表示相对于前一点的便宜量。

绘制命令：一个指令集合，用来描述外形轮廓的内容，包含大部分的直线和曲线的绘图指令。

关闭命令：作用是结束当前的画图，用来闭合整个Path，并在当前点和图形的起点之间画一条线段，使用字母z来表示。

XAML页面的代码：

<Path Stroke="DarkGoldenRod" StrokeThickness="3"

Data="M 100,200 C 100,25 400,350 400,175 H 280" />

 

Data 属性字符串以“moveto”命令开头（由 M 指示），它为 Canvas 的坐标系统中的路径建立一个起点。Path 数据参数区分大小写。大写的 M 指示新的当前点的绝对位置。小写 m 则指示相对坐标。第一段是一个三次方贝塞尔曲线，该曲线从 (100,200) 开始，在 (400,175) 结束，使用 (100,25) 和 (400,350) 这两个控制点绘制。此段由 Data 属性字符串中的 C 命令指示。同样，大写的 C 指示绝对路径；小写的 c 则指示相对路径。第二段以绝对水平“lineto”命令 H 开头，它指定绘制一条从前面的子路径的终结点 (400,175) 到新终结点 (280,175) 的直线。由于它是一个水平“lineto”命令，因此指定的值是 x 坐标。

效果图如下所示：