在此之前我们先了解一下WPF的"路径标记语法"

M:表示绘制起点 // M 0,0

L:表示绘制直线 (H:横线 V:竖线)  // L 100,0

C:三次方贝塞尔曲线   // C 100,200 200,400 300,200

Q: 二次曲线

z:闭合

......

要注意的是 每一次的绘制都是基于上一次的终点(或者原点M)

例如 M 0,0 L 100,0 L200,50 表示 移动绘制原点到(0,0) 然后绘制直线到(100,0) 紧接着从(100,0)开始再绘制直线到(200,50),也就是说每一次绘制命令都是接着上一次开始的.

*手写语法命令的时候注意空格的使用,以及逗号的使用.

等等 MSDN有详细介绍 不了解的可以去看看.

大致了解路径标记语法后我们来探讨一下"复合路径"功能.

首先我们绘制两条线

(一)

<Canvas >    <Path Data="M0,0 L50,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>    <Path Data="M100,0 L250,120 "  Stretch="Fill" Stroke="green" StrokeThickness="5"/></Canvas>

看下效果

我们在看Blend->复合路径后的代码

<Path Data="M2.5,2.5 L52.5,122.5 M2.5,2.5 L152.5,122.5" Stretch="Fill" Stroke="red" StrokeThickness="5" />

我们仔细观察 复合前的2个Path.Data的语法和复合后的Path.Data的差别.

看看看看看看....嗯... IQ处理中......................

我们把前两个拼起来看看!

//拼前:    <Path Data="M0,0 L50,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>        <Path Data="M100,0 L250,120 "  Stretch="Fill" Stroke="green" StrokeThickness="5"/>//拼后 :<Path Data="M0,0 L50,120  M100,0 L250,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>// Blend复合的:<Path Data="M2.5,2.5 L52.5,122.5 M2.5,2.5 L152.5,122.5" Stretch="Fill" Stroke="red" StrokeThickness="5" />

看看后两个Path有什么一样的地方吗?!

是的 Blend好像也是给拼接起来的? 可是为什么有2.5的误差呢?为什么每个数都是2.5 怎么不是0.1不是其他呢?  奥秘就在这里:StrokeThickness="5"

2.5正好是5的一半嘛,是的,这个2.5只是算了粗细而已.我们可以去掉它也不会影响整体的形状的.

当我们把5改为1后(什么你说改成0?? 0像素好粗啊 会闪下我氪金狗眼的!别闹~~~)

再使用复合路径得到的数据是 M0.5,0.5 L50.5,120.5 M0.5,0.5 L150.5,120.5 , 看看"误差"变为0.5了吧.如果你手动去掉所有的小数,那么你会看到形状不变的.这里我就不去演示了.

那么我们初步得到结论:复合路径 =路径1+路径2+路径3+..... (拼接所有的路径部分) .

(二)

下面我们再来看一组数据:

    <Path Data="M0,0 L50,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>        <Path Data="M100,0 L300,120 " Canvas.Left="50" Stretch="Fill" Stroke="red" StrokeThickness="5"/>

效果:

在看Blend复合后的代码:

<Path Data="M2.5,2.5 L52.5,122.5 M52.5,2.5 L252.5,122.5" Stretch="Fill" Stroke="red" StrokeThickness="5" />

首先我们基于(一)的结论忽略掉粗细误差2.5(顺便验证一下这个结论)得到结果

<Path Data="M0,0 L50,120 M50,0 L250,120" Stretch="Fill" Stroke="red" StrokeThickness="5"  />

Blend中我们看到形状位置都没变.

接下来我们尝试手动拼接上面(二)的2个Path得到

        <Path Data="M0,0 L50,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>        <Path Data="M100,0 L300,120 " Canvas.Left="50" Stretch="Fill" Stroke="green" StrokeThickness="5"/>手动拼接:        <Path Data="M0,0 L50,120 M100,0 L300,120" Stretch="Fill" Stroke="red" StrokeThickness="5"/>

这是为什么? 怎么分离的这么远?

我们来解密一下:

看看第二条Path 他有这个附加属性   Canvas.Left="50"   居然给右移了50!!!! 那么我们给他挪回去试试?

得到

<Path Data="M0,0 L50,120 " Stretch="Fill" Stroke="red" StrokeThickness="5"/>        <Path Data="M100,0 L300,120 " Canvas.Left="50" Stretch="Fill" Stroke="green" StrokeThickness="5"/>手动拼接:        <Path Data="M0,0 L50,120 M100,0 L300,120" Stretch="Fill" Stroke="red" StrokeThickness="5"/>
把第二个Path的Left 50 左移回去得到: <Path Data="M0,0 L50,120 M50,0 L250,120" Stretch="Fill" Stroke="red" StrokeThickness="5"/>
左移后 <Path Data="M0,0 L50,120 M50,0 L250,120" Stretch="Fill" Stroke="red" StrokeThickness="5"/>效果(佰年金融):
是不是一样了!  左移第二条线是移动原点M和L的横坐标 所以得到M50,0 L250,120"
( 被左移 - X需要减掉相应值 . 被右移 - X需要加上相应值 )
上下移同理,上移(Top负数)需加,下移(Top正数)需减
这个过程我们暂且称为"复位"
因此我们又得到一个结论 Canvas.Left 同样会影响复合路径!当然这里也包括Canvas.Top /Right/Bottom  ,
值得提醒的是当 Left /Top等 的值为负数时  直接简单拼接和"复位" 是不对的.因为你可能复不到位.不信你试试看. 这里稍微解释一下标记语法一个特别的地方(我猜的!没有去MSDN考证.)
<Path Data="M100,0 L300,120 "  Stretch="Fill" Stroke="green" StrokeThickness="5"/>
<Path Data="M0,0 L200,120 "  Stretch="Fill" Stroke="green" StrokeThickness="5"/>
<Path Data="M-100,0 L100,120 "  Stretch="Fill" Stroke="green" StrokeThickness="5"/>
这3个Path是一样的!
当Path中只有一段图形时(这里是只有一段Line) , Line整体平移(指的是原点从0,0 平移到100,0 且 端点从200,120平移到300,120)是不会影响Path形状和位置的.
因此在只有一段图形的Path中我们可以约掉这个平移 我们暂且称为"约分"(参考数学分数的约分哈,不严谨 好记而已~~) 所以上面我说 当Canvas.Left为负数时 不能简单直接拼接和复位.怎么办呢?我们需要先约分!先把所有能约分的线段的原点约分到不能再约分的实际原点,
例如上面的三个Path的实际原点其实都是M 0,0  .约分处理完所有图形片段后 再进行 拼接和复位.最后就能得到复合路径的结果了. 另外,凡是所有能影响Path位置的属性改变都会影响复合路径的结果,比如 RenderTransform  和Margin 等. 如果想手动去算复合路径可能是非常繁琐的一个过程~~~ 您可能需要为所有影响Path位置变化的属性改变都写一个复位的方法.在执行复合路径之前需要先调用所有的复位/约分方法来恢复Path的Data到实际值.再进行拼接计算. 以上是我粗略分析后的一些看法和结论.我之前也不知道这些的,只不过是在我的一片自定义MessageBox的文章中有人问我这个问题,我就试着猜猜.
这位童鞋@距离永远  您可请俺喝酒啊!! 嘻嘻~~

WPF的"路径标记语法"的更多相关文章

  1. 详解WPF Blend工具中的复合路径功能 ( 含路径标记语法 )

    写此文章的目的是为了简单分析一下 Blend工具中提供的"复合路径"功能.有人在我的博文中留言问我复合路径的问题.  稍微琢磨一下,觉得应该是对的.因此贴出来和大家分享.有不对的说 ...

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

    原文:Windows Phone开发(34):路径标记语法 如果你觉得前面所讨论的绘制各种几何图形的方法过于复杂,那么,今天我们也来一次"减负"吧.当然,我们是很轻松的,本教程是不 ...

  3. WPF中 PropertyPath XAML 语法

    原文:WPF中 PropertyPath XAML 语法 PropertyPath 对象支持复杂的内联XAML语法用来设置各种各样的属性,这些属性把PropertyPath类型作为它们的值.这篇文章讨 ...

  4. HTML标记语法总结

    一.HTML标记类型 1.单标记 语法:<标记名>,如:<img>.<br>.<hr> 2.双标记 语法:<标记名>…标记内容…</标 ...

  5. 【转】关于 Endnote 与 Word 卡死问题 标记语法错误

    转自:http://hi.baidu.com/lvneng/item/8147dcbb1436bfd085dd7962 当使用 Word 写论文或稿件时,Endnote 绝对是一个不错的帮手,不过偶尔 ...

  6. WPF系列 Path表示语法详解(Path之Data属性语法)

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

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

    大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com 萝卜鼠在线图形图像处理 ------------------------------------ ...

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

    原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...

  9. HTML标记语法之图片Img元素

    语法:<img src=”xxx.jpg”alt=”xxx”title=”xxx”> 属性可取值如下: 属性名称 属性值 说明 src URL 图片路径 alt 文本 图片无法显示时的文本 ...

随机推荐

  1. 基于Cloud Foundry平台部署nodejs项目上线

    Cloud Foundry(以下简称CF),CF是Vmware公司的PaaS服务平台,Paas(Platform as a Service,平台即服务), 是为开发者提供一个应用运行的平台,有了这人平 ...

  2. mysql grant命令错误:ERROR 1044 (42000): Access denied for 'root' With All Privileges

    http://stackoverflow.com/questions/21714869/error-1044-42000-access-denied-for-root-with-all-privile ...

  3. 01-C#入门(分支控制语句)

    说实话,<C#入门经典>这本书对入门的同学来说真的太棒了,先不说内容如何,就作者先以控制台(命令行)调试程序的方法,就能够最大限度地让你关注学习的内容,而不是花哨的界面调试. 现在学习是下 ...

  4. JNI支持C++与C的区别

    1. C++的代码后缀是".cpp" 2. 在JNI.h 文件中有两套代码.一套是支持c的, 一套是支持JNI的. JNI.h地址:mac ▸ 用户 ▸ douj ▸ Docume ...

  5. mac-android-虚机加速

    mac下进行android编程不可避免会碰到android虚拟机问题,macbook pro启动虚机时报错: Starting emulator for AVD 'NEW' emulator: ERR ...

  6. windows python文件拷贝到linux上执行问题

    之前在Windows下写好了一个Python脚本,运行没问题,今天在Linux下,脚本开头的注释行已经指明了解释器的路径,也用chmod给了执行权限,但就是不能直接运行脚本. 1 问题1: 报错:: ...

  7. C#泛型代理、泛型接口、泛型类型、泛型方法

    //http://www.cnblogs.com/JeffreySun/archive/2012/11/14/2770211.html //http://www.baqima.com/a/2628.h ...

  8. TCP/IP之蓟辽督师

    真正的知识是深入浅出的,码农翻身" 公共号将苦涩难懂的计算机知识,用形象有趣的生活中实例呈现给我们,让我们更好地理解. 本文源地址:TCP/IP之蓟辽督师 本文续<TCP/IP之大明内 ...

  9. Could not parse mapping document from input stream hibernate配置异常

    十二月 , :: 下午 org.apache.catalina.core.StandardContext listenerStart SEVERE: Exception sending context ...

  10. Mysql字符类型比较

    一. binary和char比较: binary 字节为单位,char字符为单位,字符占几个字节取决于字符集 binary  比较规则基于字节值,char基于字符,即使是_bin的比较规则 范围都0- ...