Silverlight Path的Data生成

最新推荐文章于 2022-01-02 13:38:50 发布

背包客啊

最新推荐文章于 2022-01-02 13:38:50 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/jfdtygv/article/details/84054943

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

Path的Data数据有下面几种生成方式：

来自其它矢量图。比如使用 Expression Design，就可以直接粘贴来自其它软件的矢量图形，然后选择导出，导出时做如后选择：文件->导出->导出属性->格式->XAML Silverlight 画布，即可得到XAML格式的矢量图形，也就是Path。
使用转换路径，比如，我们要把文字转成图形，相当于印刷行业里的文字转曲，可以直接用 Expression Blend。选中对象->路径->转换为路径，即可。
自己动手写。当然这也是最难的方式。不过对于简单图形来说非常有用。用Design生成的数据量很大，手写就会变得很简洁。这篇博客就是要介绍Path命令的格式，以及如何写一些简单的Path。

首先是Path命令列表

下面这个地址有详细描述，Silverlight路径标记语法，我下面用表格的方式给出，更直观点。

说明：

下面命令中，语法部分显示的是单个空格，实际上使用单个空格的地方也可以使用多个空格；
命令前后的空格也不是必须的；
如果结果字符串比较明确，则无需使用逗号或空白将两个数字隔开。例如，2..3 解释为两个数字："2."和".3"。同样，2-3 包含两个数字："2"和"-3"。
下面的命令中，绝大多数大写表示绝对值，小写表示相对于前一点的值。

类型		命令格式	解释
移动指令 Move Command（M）		M x,y 或 m x,y	比如：M 100,240 或 m 100,240 大写的 M 指示 x,y 是绝对值；小写的 m 指示 x,y 是相对于上一个点的偏移量，如果是 (0,0)，则表示不存在偏移。当您在 move 命令之后列出多个点时，即使您指定的是线条命令，也将绘制出连接这些点的线。
绘制指令（Draw Command）通过使用一个大写或小写字母输入各命令：其中大写字母表示绝对值，小写字母表示相对值。线段的控制点是相对于上一线段的终点而言的。依次输入多个同一类型的命令时，可以省略重复的命令项；例如，L 100,200 300,400 等同于 L 100,200 L 300,400。	直线:Line(L)	格式： L 结束点坐标或: l 结束点坐标。	比如：L 100,100 或 l 100 100。坐标值可以使用x,y（中间用英文逗号隔开）或x y（中间用半角空格隔开）的形式。
	水平直线: Horizontal line(H)	格式： H x值或 h x值 (x为System.Double类型的值)	绘制从当前点到指定x坐标的直线。比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。
	垂直直线: Vertical line(V)	V y值或 v y值 (y为System.Double类型的值)	绘制从当前点到指定y坐标的直线。比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。
	三次方程式贝塞尔曲线: 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)为结束点。
	二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)	Q 控制点结束点或 q 控制点结束点	通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。比如：q 100,200 300,200。其中，点(100,200)为控制点，点(300,200)为结束点。
	平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)	S 控制点结束点或 s 控制点结束点	通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。比如：S 100,200 200,300
	平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)	T 控制点结束点或 t 控制点结束点	与平滑三次方程贝塞尔曲线类似。在当前点与指定的终点之间创建一条二次贝塞尔曲线。控制点假定为前一个命令的控制点相对于当前点的反射。如果前一个命令不存在，或者前一个命令不是二次贝塞尔曲线命令或平滑的二次贝塞尔曲线命令，则此控制点就是当前点。比如：T 100,200 200,300
	椭圆圆弧: 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类型。比如：A 5,5 0 0 1 10,10
关闭指令 (close Command): 可选的关闭命令		用Z或z表示	用以将图形的首、尾点用直线连接，以形成一个封闭的区域。
填充规则（fillRule）如果省略此命令，则路径使用默认行为:即 EvenOdd。如果指定此命令，则必须将其置于最前面。>	EvenOdd 填充规则	F0 指定 EvenOdd 填充规则。	EvenOdd 确定一个点是否位于填充区域内的规则方法：从该点沿任意方向画一条无限长的射线，然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数，则点在内部；如果为偶数，则点在外部。
	Nonzero 填充规则	F1 指定 Nonzero 填充规则。	Nonzero 确定一个点是否位于路径填充区域内的规则方法：从该点沿任意方向画一条无限长的射线，然后检查形状段与该射线的交点。从 0 开始计数，每当线段从左向右穿过该射线时加 1，而每当路径段从右向左穿过该射线时减 1。计算交点的数目后，如果结果为 0，则说明该点位于路径外部。否则，它位于路径内部。

一些简单例子：

Xaml 文件

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication_Test.MainPage" Width="640" Height="500"> <Canvas Background="Black">  
   
     <Path Stroke="BlanchedAlmond" Data="M101,95 L269,95"/>  
   
     <Path Stroke="Blue" Data="m101,95 l269,95"/>  
   
     <Path Stroke="BlanchedAlmond" Data="M101,95 58,54 60,38"/>  
   
     <Path Stroke="BurlyWood" Data="M30,185 H100"/>  
   
     <Path Stroke="BurlyWood" Data="M30,185 v100"/> Canvas>UserControl>

执行效果，下面数字分别标识了上面代码注释中的5条线。

Xaml 文件

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication_Test.MainPage" Width="640" Height="500"> <Canvas Background="Black">  
   
     <Path Stroke="AliceBlue" Data="M 150,50 c 80,3 8,60 120,30" />    
   
     <Path Stroke="Aqua" Data="M 70,150 Q 80,30 120,90" />  
   
     <Path Stroke="Azure" Data="M 90,150 s 118,3 190,90" />  
   
     <Path Stroke="RosyBrown" Data="M 350,110 t10,20 32,10" />  
   
     <Path Stroke="Red" Data="M 90,180 a 2 3 8 1 0 29,90" /> Canvas>UserControl>

执行效果，下面数字分别标识了上面代码注释中的5条线。

Xaml 文件

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication_Test.MainPage" Width="640" Height="500"> <Canvas Background="Black">  
   
     <Path Stroke="AliceBlue" Data="F0 M 150,50 c 5,30 8,60 120,30 z" />    
   
     <Path Stroke="Red" Data="F1 M 95,180 a 2 3 8 1 0 29,90z" /> Canvas>UserControl>

执行效果，