形状绘图
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:Visual Studio 2015
作者:朱海恩
撰写时间:2019年6月10日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
形状绘图:
- Shape是一个2D绘图类
- Line直线
- Rectangle矩形
- Ellipse椭圆
- Polygon多边形
- 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 坐标。
效果图如下所示: