路径

路径(Path)可以用来定义任意形状的曲线和几何图形,当然这种任意性也带来了复杂性。为了方便的绘制几何图形,微软在Visual Studio 2012安装包中为程序开发者提供了免费的Blend for Visual Studio设计工具,利用这个界面设计工具可以方便的绘制图形。

而对于开发者而言,有必要掌握的是如何通过编写代码的方式实现应用界面的开发,并可以轻松地阅读这些已经绘制好的图形代码。本节将介绍有关路径绘图的相关知识,帮助读者理解Path与PathGeometry的绘图原理。

8.2.1 Path

Path使用一种紧凑的字符串语法来描述几何形状的路径,这种语法可以称为路径标记语法。通过使用路径标记语法定义Data属性能实现几何图形的绘制。下面列出了路径标记语法所支持的常用命令,并对这些命令进行简单的介绍。

  • 移动命令,指定新图形的起点StartPoint,用字母M或m表示,大写的M表示起始点的绝对值,小写的m表示起始点相对于前一个点的偏移量。在Data属性中可以同时存在两个M或m命令。
  • 绘制命令,它是一个指令集合,用于描述几何图形的形状,例如直线、水平线和三次方贝塞尔曲线命令,将在下面对常用的绘制命令进行介绍。
  • 关闭命令,该指令的作用是结束当前绘制图形的操作,并绘制一条连接起始点和结束点的线,使用字母Z表示。

下面通过绘制一段曲线来演示如何使用Path,这段曲线由一条贝赛尔曲线和两条线段组成。在一个打开的Windows应用商店项目中新建一个空白页,并命名为PathPage,双击打开此页面的PathPage.xaml文件,在Grid元素中添加如下代码。

<Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 10,10 C 20,100 40,250 200,175 H 280 Z"/>

运行此页面,效果如图8-7所示。

图8-7 path 图形运行效果图

在上面的代码中,首先定义Path的Stroke 属性为DarkGoldenRod、StrokeThickness属性为3,以便Path能呈现。接着定义Path的Data属性,这是决定图形的关键部分,使用M命令开始,指定此路径起点为(10,10)。

接着使用C命令绘制一段三次方贝塞尔曲线,通过定义四个点来创建一个三次方贝塞尔曲线,这四个点是起点、终点及两个控制点。其中起点可以理解为M命令指定的点或上一个路径片段的终点。三次方贝塞尔曲线的两个控制点的作用像磁铁一样,朝着自身的方向吸引本应为直线的部分,从而形成一条曲线。第一个控制点影响曲线的开始部分,第二个控制点影响曲线的结束部分。本示例的三次方贝塞尔曲线由起点 (10,10)、终点(200,175)以及两个控制点 (20,100) 、 (40,250) 绘制而成。

接着使用命令H,该命令从点(200,175)水平绘制到X轴坐标为280的点。最后使用命令Z连接此路径的结束点与起始点。

通过上面的示例相信读者对绘制命令有了一个初步的认识,下面列出几个常用的绘制命令。

  • L(直线),表示绘制一条线的命令,例如"L100,100"或"L100 100"。
  • H(水平直线),表示在当前点与指定的X轴坐标之间绘制一条水平直线,其中当前点可以理解为M命令指定的起点或上一个路径片段的终点。
  • V(竖直直线),表示在当前点与指定的Y轴坐标之间绘制一条竖直线。
  • C(三次方贝塞尔曲线命令),通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线,例如"C20,100 40,250 200,175",其中点(20,100)表示第一个控制点,点(40,250)表示第二个控制点,最后一个点(200,175)表示结束点。

Win10系列:C#应用控件进阶6的更多相关文章

  1. Win10系列:JavaScript 控件的使用

    向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...

  2. WPF 模仿 UltraEdit 文件查看器系列一 用户控件

    WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...

  3. C#控件系列--文本类控件

    C#控件系列--文本类控件         文本类控件主要包含Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能         Label用来 ...

  4. WPF从我炫系列4---装饰控件的用法

    这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...

  5. WPF编游戏系列 之四 用户控件

    原文:WPF编游戏系列 之四 用户控件        在上一篇<WPF编游戏系列 之三 物品清单>中,对物品清单进行了演示,其中反复用到了同一组控件(如下图),而且 颜昌钢也指出在3.2. ...

  6. 【转】PyQt5系列教程(七)控件

    PyQt5系列教程(七)控件   软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...

  7. Win10系列:C#应用控件进阶10

    EllipseGeometry EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和Rad ...

  8. Win10系列:C#应用控件进阶8

    LineGeometry LineGeometry控件通过指定直线的起点和终点来定义线.LineGeometry对象无法进行自我绘制,因此同样需要使用 Path元素来辅助呈现.LineGeometry ...

  9. Win10系列:C#应用控件进阶9

    RectangleGeometry 在使用RectangleGeometry控件绘制矩形时,矩形的位置和尺寸由Rect属性定义,该属性指定矩形的相对位置.高度和宽度.Rect有四个参数,前两个参数表示 ...

  10. Win10系列:C#应用控件进阶7

    PathGeometry 前面介绍了Path的使用方法,接下来介绍PathGeometry类.PathGeometry提供了描绘由弧线.曲线和直线组成的多个复杂图形的方法.PathGeometry的核 ...

随机推荐

  1. Linux 链路聚合

    Linux 链路聚合 链路聚合与双网卡绑定几乎相同,可以实现多网卡绑定主从荣誉,负载均衡,提高网络访问流量.但链路聚合与双网卡绑定技术(bond)不同点就在于,双网卡绑定只能使用两个网卡绑定,而链路聚 ...

  2. java代码块,静态代码块,静态变量,构造方法执行顺序

    一个类中执行顺序: 静态变量静态代码块代码块构造方法 子类和父类执行顺序: 父类静态变量父类静态代码块子类静态变量子类静态代码块父类代码块父类构造方法子类代码块子类构造方法 直接看代码,一目了然. p ...

  3. HBase API 基础操作

    对于数据操作,HBase支持四类主要的数据操作,分别是: Put :增加一行,修改一行 Delete :删除一行,删除指定列族,删除指定column的多个版本,删除指定column的制定版本等 Get ...

  4. Java基本语法(一)

    1,Java中命名规则与规范 命名规则是我们必须遵守的约定: 1,Java中需要命名的地方(我们称之为标识符),可以26个英文字母(不区分大小写),0-9的数字,_和$等组成,不能包含特殊字符(#), ...

  5. 剑指offer 09:变态跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. /* f(n-1) = f(n-2) + f(n-3) + ... + f(0 ...

  6. 远程和Ubuntu服务器进行Socket通信,使用python和C#(准备篇)

    服务器在阿里云上,和一般的本地配置方案不太一样,所以网上的博客里没有解决办法,本人在这里记录一下,方便大家交流. 由于数据要保存到MySQL数据库中,使用python对数据进行操作,爬到数据直接进行保 ...

  7. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  8. Unity日常记录 - QualitySettings 性能设置

    unity打包时,可通过QualitySettings优化图像性能,这是最常设置也是最明显的图像性能体现 设置图形质量的水平,一般来说,质量是以牺牲性能为代价的,所以最好不要追求移动设备或旧硬件的最高 ...

  9. HTML5外包团队:HTML5 Canvas使用教程

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  10. pytest--fixture参数化的实现方式和执行顺序

    之前看到fixture函数可以通过添加,params参数来实现参数化,后续看到了悠悠 的博客,可以通过@pytest.mark.parametrize来实现,现在做一个总结 实现方式一 通过param ...