Windows Phone开发(34):路径标记语法

移动开发
Windows Phone具有桌面定制、图标拖拽、滑动控制等一系列前卫的操作体验。其主屏幕通过提供类似仪表盘的体验来显示新的电子邮件、短信、未接来电、日历约会等,让人们对重要信息保持时刻更新。

如果你觉得前面所讨论的绘制各种几何图形的方法过于复杂,那么,今天我们也来一次“减负”吧。当然,我们是很轻松的,本教程是不用考试的,也不会班级排名,仅仅为读者朋友们提供一种思路罢了。

本节我们聊一下路径标记法,有了这个东东,你会觉得绘制路径会轻松了不少,事不宜迟,路径标记法到底有多方便,先看一个实例再说吧。

  1. <Path VerticalAlignment="Stretch" HorizontalAlignment="Stretch"    
  2.       Stroke="LightGreen" StrokeThickness="6"   
  3.       Data="M12,2 L35,28 175,69 H80 V260 M185,400 C60,40 135,100 300,250" />   

看看效果图。

怎么样?是不是简洁了许多?

一、移动指令

这个好理解,就是移动到某个点,接下来绘制的一系列图形以该点作为起点,语法如下:

  1. M<点坐标>或m<点坐标>  

M表示绝对定位,m表示相对于上一个点的偏移量,如果移动指令后接着多个点,则会创建连接这些点的直线,看下面的例子。

  1. <Path HorizontalAlignment="Stretch"   
  2.       VerticalAlignment="Stretch"   
  3.       Stroke="Yellow" StrokeThickness="6"   
  4.       Data="M50,26 124,39 220,97 m200,145 95,335"/>  

先看运行效果。

注意上面的M与m的区别,距离上一个结束点X轴+200,Y轴+145的地方,也就是一个偏移量。

二、绘制指令

这里我仅仅列举几个例子,具体内容大家可以参考MSDN。

1、绘制直线。

语法:

  1. L <结束点>或l <结束点>   

例子:

  1. <Path HorizontalAlignment="Stretch"   
  2.   VerticalAlignment="Stretch"   
  3.   Stroke="Yellow"   
  4.   StrokeThickness="6"   
  5.   Data="M21,15 L30,17 200,79 150,300 160,410"/>  

运行效果。

2、贝塞尔曲线

(1)三次方贝塞尔曲线

语法:C 控制点1 控制点2 终点 ,或c 控制点1 控制点2 终点。

例子:

  1. <Path HorizontalAlignment="Stretch"   
  2.   VerticalAlignment="Stretch"   
  3.   Stroke="Yellow"   
  4.   StrokeThickness="6"   
  5.   Data="M10,5 C60,75 150,160 30,200"/> 

(2)二次贝塞尔曲线

语法:Q 控制点 终点 或 q 控制点 终点

例子:

  1. <Path HorizontalAlignment="Stretch"   
  2.       VerticalAlignment="Stretch"   
  3.       Stroke="Yellow"   
  4.       StrokeThickness="6"   
  5.       Data="M10,5 Q200,55 200,385"/>  

3、绘制弧线

语法:

A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint

- 或 -

a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint

size:圆弧的大小,X表示X轴上的半径长度,Y表示Y轴上的半径度度。

rotationAngle:圆弧的角度。

isLargeArcFlag:如果弧线的角度应大于或等于 180 度,则设置为 1;否则设置为 0。

sweepDirectionFlag:如果弧线按照正角方向绘制,则设置为 1;否则设置为 0。

endPoint:终点。

例子:

  1. <Path HorizontalAlignment="Stretch"   
  2.       VerticalAlignment="Stretch"   
  3.       Stroke="Yellow"   
  4.       StrokeThickness="6"   
  5.       Data="M10,30 A185,230 90 0 1 200,435"/>  

也许你会发现,尽管使用这种方法,但是画起图来也是不方便,现在,我明白我为什么不重点叙述这些内容的原因了,对于XAML手动构图,我只是简单带过,在实际开发中,效率不高,而且难度较大。

下一节中,我向大家介绍一种更简单的绘图方案。

责任编辑:闫佳明 来源: oschina
相关推荐

2013-04-19 17:11:02

Windows PhoWindows Pho

2013-04-23 16:55:15

Windows Pho路径之其它Geomet

2010-04-21 17:07:54

Windows Pho

2013-07-30 12:37:56

Windows PhoWindows Pho

2013-04-19 16:34:56

Windows PhoWindows Pho

2013-04-16 17:02:50

Windows Pho概论

2013-07-30 11:18:37

Windows PhoWindows Pho

2013-04-17 14:00:06

Windows PhoWindows Pho

2011-06-07 12:42:15

Windows Pho

2010-04-08 17:40:23

Windows Pho

2010-12-14 18:48:49

微软

2013-04-19 16:52:24

Windows PhoWindows Pho

2013-07-31 13:13:50

Windows PhoMVVM模式

2013-04-19 15:35:54

Windows Pho隔离存储

2012-06-04 14:47:58

Windows Pho

2013-07-31 12:50:39

搭建Windows PWindows Pho

2013-04-17 14:47:19

Windows PhoWindows Pho

2012-08-16 10:35:50

Windows Pho

2013-04-17 13:27:04

Windows PhoWindows Pho

2011-06-07 11:35:38

Windows Pho
点赞
收藏

51CTO技术栈公众号