WPF中图形表示语法详解(Path之Data属性语法)

原文 http://blog.csdn.net/johnsuna/article/details/1885597

老规矩,看图说话。

先看显示效果:

(图1)

XAML(代码A)
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

<!--这是使用PathFigureCollection的表示方法-->
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
  </Path.Data>

</Path>

<!--这是使用StreamGeometry的表示方法-->
<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />
</Canvas>
</Page>

 请留意上面加粗及红色文字部分。

WPF提供两个类来描述路径数据:一个是StreamGeometry,另一个是PathFigureCollection。

类似:<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />的形式是StreamGeometry的XAML代码表示形式,也是最简洁的表示形式。
而类似:
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
  </Path.Data>
</Path>
这样的方式是使用PathFigureCollection的XAML代码表示方式。

这两种方式都可以达至同一种显示效果,那么,什么时候使用StreamGeometry,什么时候使用PathFigureCollection方式呢?
一般地,当你建立路径后,不再需要修改时,可使用StreamGeometry方式,如果还需要对路径数值进行修改,则使用PathFigureCollection方式(这里就是PathGeometry)。

Data属性的表示语法:
(1)StreamGeometry方式: [填充规则] 外形描述[外形描述]*
(2)PathFigureCollection方式: 外形描述[外形描述]*

注:
(1)上面语法中,[...]表示可选,*代表任意个。
(2)“填充规则”中,有EvenOdd和Nonzero两种。XAML中为了简洁,使用“F0”表示EvenOdd,“F1”表示Nonzero。
(3)“外形描述”的语法:moveCommand drawCommands [closeCommand]
其中:移动指令(moveCommand),绘制指令(drawCommands),关闭指令(closeCommand)。
(4)moveCommand指定起始点,使用一个drawingCommand描述外形轮廓的内容描述,closeCommand用来关闭路径。

如下图:


(图2)

下面来解释一下“M 100,240 C510,300 80,100 300,160 H40 v80”这样字符串的意义。
分为四种情况来解释:
1. 移动指令:Move Command(M):M 起始点  或者:m 起始点
比如:M 100,240或m 100,240
使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没有指定,则使用(0,0)。

2. 绘制指令(Draw Command):
我们可以绘制以下形状:
(1) 直线:Line(L)
(2) 水平直线: Horizontal line(H)
(3) 垂直直线: Vertical line(V)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical Arc(A)

上面每种形状后用括号括起的英文字母为命令简写的大写形式,但你也可以使用小写。使用大写与小写的区别是:大写是绝对值,小写是相对值。


如:L 100, 200 L 300,400表示从绝对坐标点(100,200)到另一绝对坐标点(300,400)的一条直线。而l 100,
200 l
300,400则表示相对上一点(如果未指定,则默认为(0,0)坐标点)开始计算的坐标点(100,200)到坐标点为(300,400)的一条直线。

当我们重复使用同一种类型时,就可以省略前面的命令。比如:L 100, 200 L 300,400简写为:L 100, 200 300,400。

下图是以下XAML代码的绘制效果(为了方便你比较,我加了背景格子,每小格为10像素):
XAML(代码B):
<Path Stroke="Black" StrokeThickness="1" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />

(图3)

细心的读者可能会发现,有点怪怪的感觉,因为我故意将下面的三角形的代码放在前面了,这样,似乎不太符合习惯。事实上,上面的代码与这个结果完全一样:
<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />
这里有一个你暂时还没见过的Z指令,它就是一个关闭指令(close Command),表示封闭指定形状,即将首尾点连接起来形成封闭的区域。

绘制指令格式语法:

(1) 直线:Line(L)
格式:
L 结束点坐标 或: l 结束点坐标。
比如:L 100,100 或 l 100 100。坐标值可以使用x,y(中间用英文逗号隔开)或x y(中间用半角空格隔开)的形式。

(2) 水平直线  Horizontal line(H):绘制从当前点到指定x坐标的直线。
格式:H x值 或 h x值(x为System.Double类型的值)
比如:H 100或h 100,也可以是:H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V):绘制从当前点到指定y坐标的直线。
格式:V y值 或 v y值(y为System.Double类型的值)
比如:V 100或y 100,也可以是:V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C):通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式:C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
比如:C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中,点(100,200)为第一控制点,点(200,400)为第二控制点,点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q):通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式:Q 控制点 结束点 或 q 控制点 结束点
比如:q 100,200 300,200。其中,点(100,200)为控制点,点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S):通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式:S 控制点 结束点 或 s 控制点 结束点
比如:S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T):与平滑三次方程贝塞尔曲线类似。
格式:T 控制点 结束点 或 t 控制点 结束点
比如:T 100,200 200,300

关于第(6)种平滑三次方程式贝塞尔曲线与第(7)种平滑二次方程式贝塞尔曲线的比较:

如下图:

XAML代码:
<!-- 这是左边平滑三次方程式贝塞尔曲线的代码 -->
<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 S 250,100 80,280" />

<!--这是关键点的连线示意-->
<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 L 250,100 80,280" />

<!-- 这是右边平滑二次方程式贝塞尔曲线的代码 -->
<Path Stroke="Red" StrokeThickness="2" StrokeDashArray="1,1,1"   Data="M 150,10 T 250,100 80,280" />
备注:为了方便比较,我使用了同一个控制点,坐标均为:(250,100),起始和结束点也一样。另外,我使用了虚线(用了StrokeDashArray属性)及不同颜色以示区分。

(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。
A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
或:
a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
尺寸(Size): System.Windows.Size类型,指定椭圆圆弧X,Y方向上的半径值。
旋转角度(rotationAngle):System.Double类型。
圆弧旋转角度值(rotationAngle):椭圆弧的旋转角度值。 
优势弧的标记(isLargeArcFlag):是否为优势弧,如果弧的角度大于等于180度,则设为1,否则为0。 
正负角度标记(sweepDirectionFlag):当正角方向绘制时设为1,否则为0。 
结束点(endPoint):System.Windows.Point类型。

3. 关闭指令(close Command):用以将图形的首、尾点用直线连接,以形成一个封闭的区域。
用Z或z表示。

如果你对SVG有所了解,你会发现它们是惊人的相似。

小结一下:本篇讲述了在WPF中,图形路径的XAML代码表达方式。

时间: 2025-01-20 13:25:41

WPF中图形表示语法详解(Path之Data属性语法)的相关文章

DOS批处理中%~dp0等扩充变量语法详解_DOS/BAT

有时候我们看到别人使用%~dp0 ~是扩展的意思,相当于把一个相对路径转换绝对路径 %0代指批处理文件自身 %1表示批处理文件命令行接收到的第一个参数,%2表示第二个,以此类推 %~d0 是指批处理所在的盘符,其中d代表drive %~p0 是指批处理所在的目录,其中p代表path %~dp0 是批处理所在的盘符加路径 cd %~dp0 就是进入批处理所在目录了 详细解释还可参考命令 call /? DOS批处理中%~dp0表示什么意思 (注: %0 就是该 batch 文件的文件名) 这句的意

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来

Struts 2中的constant配置详解_java

1.<constant name="struts.i18n.encoding" value="UTF-8" /> 指定Web应用的默认编码集,相当于调用 HttpServletRequest的setCharacterEncoding方法. 2.<constant name="struts.i18n.reload" value="false"/> 该属性设置是否每次HTTP请求到达时,系统都重新加载资源文

PHP也能干大事之PHP中的编码解码详解

PHP也能干大事之PHP中的编码解码详解        这篇文章主要介绍了PHP也能干大事之PHP中的编码解码详解,本文讲解了ASCII编解码.URL编解码.Base64编解码.HTML实体编解码.二进制.八进制.十进制.十六进制相互转换等内容,需要的朋友可以参考下 写在前面 PHP也能干大事是我总结的PHP语法特性及相关函数类库的经典用法,并不一定是真正能实现四两拨千斤的功效,但是掌握这些方法,可以在你的工作和学习上有一些帮助,希望大家能集思广益,将<PHP也能干大事>丰富得更精彩!转载请注

SQL SERVER存储过程语法详解

SQL SERVER存储过程语法: Create PROC [ EDURE ] procedure_name [ ; number ] [ { @parameter data_type } [ VARYING ] [ = default ] [ OUTPUT ] ] [ ,...n ] [ WITH { RECOMPILE | ENCRYPTION | RECOMPILE , ENCRYPTION } ] [ FOR REPLICATION ] AS sql_statement [ ...n ]

Python中的默认参数详解

  这篇文章主要介绍了Python中的默认参数详解,本文讲解了默认参数的基本原理.如何正确地使用可变参数等内容,需要的朋友可以参考下 文章的主题 不要使用可变对象作为函数的默认参数例如 list,dict,因为def是一个可执行语句,只有def执行的时候才会计算默认默认参数的值,所以使用默认参数会造成函数执行的时候一直在使用同一个对象,引起bug. 基本原理 在 Python 源码中,我们使用def来定义函数或者方法.在其他语言中,类似的东西往往只是一一个语法声明关键字,但def却是一个可执行的

Ruby中的钩子方法详解

  这篇文章主要介绍了Ruby中的钩子方法详解,本文讲解了什么是钩子方法.included.Devise中的 included.extended.ActiveRecord中的 extended.prepended.inherited等内容,需要的朋友可以参考下 Ruby的哲学理念是基于一个基本的要素,那就是让程序员快乐.Ruby非常注重程序员的快乐,并且也提供了许多不同的方法来实现它. 它的元编程能力能够让程序员编写在运行时动态生成的代码.它的线程功能使得程序员有一种优雅的的方式编写多线程代码.

JavaScript中的依赖注入详解

 这篇文章主要介绍了JavaScript中的依赖注入详解,本文讲解了requirejs/AMD方法.反射(reflection)方法等内容,需要的朋友可以参考下     计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架.随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题.依赖

JavaScript中的函数模式详解

 这篇文章主要介绍了JavaScript中的函数模式详解,本文讲解了创建函数的语法.函数表达式.命名函数表达式.函数的声明.函数声明与表达式.函数的提升.即时函数模式等内容,需要的朋友可以参考下     JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建函数的语法 命名函数表达式 代码如下: //命名函数表达式 var add = function