上市公司网站分析,游戏网站开发需求分析,wordpress卡密会员,瑞安门户网站建设WPF 使用 Expression Design 画图导出及使用 Path 画图目录WPF 使用 Expression Design 画图导出及使用 Path 画图一、软件介绍二、Microsoft Expression Design 使用三、微语言和 Path 绘图1、注释 图形#xff08;中括号#xff09;2、并行模式 图… WPF 使用 Expression Design 画图导出及使用 Path 画图目录WPF 使用 Expression Design 画图导出及使用 Path 画图一、软件介绍二、Microsoft Expression Design 使用三、微语言和 Path 绘图1、注释 图形中括号2、并行模式 图形平行线3、页面内引用 图形圆形独立观察员 2020 年 11 月 21 日 一、软件介绍最近接触到一个流程图画图软件基本功能都有但是不确定其中的提供的流程图完不完整于是到在线画图网站 ProcessOn 上看了下。 果然是缺少了几项比如这个 注释 那么在 WPF 中如何添加图形呢一种自然是使用图片另一种则是使用 WPF 的 Xaml 语法生成图形之前提到的软件是使用后者本文探讨的也是这种。 使用代码Xaml生成图形毕竟也不是那么容易的所以有没有什么简单的方法呢毕竟 Xaml 的设计初衷之一就是让设计人员能够有方法按照其原有的工作方式进行设计然后能生成相应的 WPF 或其它程序能使用的界面数据。众所周知和 Visual Studio 同一家族的还有个 Blend for Visual Studio这个是用于做界面设计的它能对界面效果做的设置项确实比 Visual Studio 多但是如何使用它进行绘图设计本人还是不得要领。 有没有像 PhotoShop 一样能绘制图形然后又能导出 Xaml 数据的软件呢还真有叫做 Microsoft Expression Design可以从 MSDN, 我告诉你 网站下载 Expression Studio 4里面包含了这个。附 Ultimate 版激活码6WDDQ-K7D4F-GQGF4-2VYBJ-8K6MB。另外微软已经放弃支持这套软件了不过不影响我们使用它。 二、Microsoft Expression Design 使用下面来看看如何使用 Expression Design 4 来绘制之前说的注释流程图标志。首先打开软件新建一个 60*50 的画布黑线框住的部分然后拖一些标尺线来辅助定位 在左边的工具栏选择 折线 工具 在如下图的 1、2、3、4 四个点依次点击然后按 ESC 键就形成了目标图形然后把线的宽度改为 5 像素 这就完成啦可以导出了选择文件 -- 导出会弹出导出窗口具体可参考微软的说明https://docs.microsoft.com/zh-cn/previous-versions/visualstudio/design-tools/expression-studio-4/cc294753(vexpression.40) 导出格式可选项中和 WPF 有关的一个是 XAML WPF 画布 还有一个是 XAML WPF 资源字典 画布导出的是 Path 元素数据资源字典导出的是画刷资源数据不过可以看到两者的关键数据对于画布来说就是 Path 的 Data 数据是一致的 注意本文探讨的是使用画布导出的这种数据形式也就是使用 Path 元素来绘制图形其 Data 中的字符串数据是一种被称为 微语言 的简便表示方式。 言归正传大家可以看到之前我们选择 要导出的项 时选的是 选定对象这就导致图形没有了边距所以我们可以选择 整个文档 来避免这种问题 这样微语言数据中就体现出边距了 至此导出的数据可以任君使用了。这种纯粹的 Xaml 文件还可以直接在浏览器中打开 三、微语言和 Path 绘图先看看《WPF 编程宝典》中关于微语言图形命令的列举 1、注释 图形中括号我们拿出之前导出数据的 Data 值F1 M 20,7.5625L 7.5,7.5625L 7.5,42.5L 20,42.5 F 命令设为 1 时具有穿透效果此处可省略太精细的小数位数可去除所以可优化如下M 20,7.5 L 7.5,7.5 L 7.5,42.5 L 20,42.5 M 表示起点L 表示直线对应到图上则如下 以上所示实际上是通过把线条加粗来形成图形所以无法再有描边了设置非透明填充后效果如下 而一般是要用细线条围出图形这样既有描边又有填充。Path 的 Data 数据如下M 20,5 L5,5 L5,45 L20,45 L20,40 L10,40 L10,10 L20,10 Z这里多出个 Z 命令表示终点和起点相连形成封闭图形。所以各命令和坐标对应到图形上就是 效果如下 2、并行模式 图形平行线经过上一小节绘制 注释 的过程可以看出实际上熟练了之后我们确实不需要使用 Expression Design 来导出数据只需要一个画图软件来辅助确定一下坐标就行了。甚至再熟练一点我们在脑海中就能确定坐标了哈哈。 这一小节我们来画下面这个 并行模式实际上就是两条平行线 直接使用截图软件来画图了确定下坐标 这个图形需要两个起点所以微语言命令中出现了两个 MM5,5 L55,5 L55,10 L5,10 Z M5,40 L55,40 L55,45 L5,45 Z 效果如下改变了渐变方向 3、页面内引用 图形圆形页面内引用 使用一个圆形来表示 圆形需要使用画圆弧的命令 A 来绘制具体可参考网上的文章《WPF 使用 PATH 来画圆》以下为要点摘录DataM 300,300 A 100,100 0 1 1 300,299 Z M 300,300 表示起始坐标字母 M 为 Move, 意思是将画笔移到 300,300 处 A 100,100 0 1 1 300,299 这是圆弧的书写语法详细格式如下 A 表示 Arc 圆弧 100,100 表示圆弧的 x, y 值表示椭圆时表示大小半径圆是两值相同 0 表示图形的旋转角度 1 当图形设置了旋转角度并且大于 180 度时才会生效1 表示取大圆弧0 表示取小圆弧 1 表示画圆时笔画是是顺时针画需要逆时针时设置为 0 300,299 表示终止坐标。 Z 表示路径闭合。 我们这里将起点设为上边的中间位置30,0半径为 25终止坐标不能和起点重合所以做个微小的偏移29,1最后使用 Z 命令闭合所以微语言命令如下M 30,0 A 25,25 0 1 1 29,1 Z 最终效果如下 好了就先到这里吧算是抛砖引玉。
