WPF 使用 Expression Design 画图导出及使用 Path 画图

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(v=expression.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 来导出数据,只需要一个画图软件来辅助确定一下坐标就行了。甚至再熟练一点,我们在脑海中就能确定坐标了,哈哈。

 

这一小节我们来画下面这个 "并行模式",实际上就是两条平行线:

 

直接使用截图软件来画图了,确定下坐标: 

 

这个图形需要两个起点,所以微语言命令中出现了两个 M:

M5,5 L55,5 L55,10 L5,10 Z M5,40 L55,40 L55,45 L5,45 Z

 

效果如下(改变了渐变方向):

 

3、"页面内引用" 图形(圆形)

页面内引用 使用一个圆形来表示:

 

 

圆形需要使用画圆弧的命令 A 来绘制,具体可参考网上的文章《WPF 使用 PATH 来画圆》,以下为要点摘录:

Data="M 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

 

最终效果如下:

 

好了,就先到这里吧,算是抛砖引玉。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/306800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——模式匹配kmp算法

暴力算法 //暴力算法 int index(SString S,SString T,int pos) {int ipos,j1;while(i<S[0]&&j<T[0]){if(S[i]T[j]){i;j;}else {ii-j2;j1;}}if(j>T[0])return i-T[0];else return 0;} kmp算法 next[]数组的求法&#xff1a; 例子&#xff1a;abaabcac 模式串…

python实例化对象是什么意思_请帮我理解python对象的实例化.

我不是程序员,我正在尝试学习python.但我对对象实例化有点困惑.我认为Class就像模板一样,对象是基于模板制作(或实例化).这是否意味着一旦创建了对象(例如,classinst1 MyClass()),模板中的更改不应该影响对象中的内容&#xff1f; 此外,下面的代码显示我可以更改类变量“commo…

互联网时代供应链

供应链是指围绕核心企业&#xff0c;从配套零件开始&#xff0c;制成中间产品以及最终产品&#xff0c;最后由销售网络把产品送到消费者手中的、将供应商&#xff0c;制造商&#xff0c;分销商直到最终用户连成一个整体的功能网链结构。供应链管理的经营理念是从消费者的角度&a…

win7 计算器 android,教你巧妙应用Win7计算器和时钟

正文最新的Win7是一种个性化设计极强的操作系统&#xff0c;在许多细节方面都做到了人性化设计。其功能的DIY性非常明显&#xff0c;是XP系统远远不能比的。今天我们要说的是Win7计算器和时钟&#xff0c;除了可以计算和时间之外我们还可以让他们有哪些妙用呢&#xff1f;我们左…

python最大值_Python 获取最大值函数|python3教程|python入门|python教程

https://www.xin3721.com/eschool/pythonxin3721/ 以下实例中我们使用max()方法求最大值&#xff1a; # -*- coding: UTF-8 -*- # Filename : test.py # author by : www.w3cschool.cn # 最简单的 print(max(1, 2)) print(max(a, b)) # 也可以对列表和元组使用 print(max([1,2]…

真实经历:整整一年了,他是这样从程序员转型做产品经理的

这是头哥侃码的第224篇原创每年年底&#xff0c;有不少企业都会对一年内辛勤劳作的员工量身定做一些奖项。发个奖杯&#xff0c;给点奖金&#xff0c;让那些没得奖的人看看&#xff0c;咱们公司有多么的关注员工的闪光点&#xff0c;优秀之处。用人所长&#xff0c;容人所短&am…

数据结构—— 基于二叉树的算术表达式求值

实验五 基于二叉树的算术表达式求值 数据结构——中序表达式求值&#xff08;栈实现&#xff09; 实验目的&#xff1a; 1.掌握二叉树的二叉链表存储表示和二叉树的遍历等基本算法。 2.掌握根据中缀表达式创建表达式树的算法 3.掌握基于表达式树的表达式求值算法。 实验内容&a…

数字标牌 android,【浩鑫推出全球首款英特尔方案+Android系统数字标牌播放器】PjTime.COM 新品快讯 Intel...

世界知名迷你准系统领导品牌&#xff0d;浩鑫Shuttle&#xff0c;秉承开拓创新&#xff0c;引领行业发展的传统&#xff0c;此次创造性的推出全球首款采用英特尔硬件方案搭载Android系统的NS01A数字标牌播放器&#xff0c;为整个数字标牌行业贡献了全新的硬件解决方案。英特尔方…

python回到本次循环开头_Python中,当一个while循环判断为false,结束这个循环的时候,怎么进入到下一个循环中?...

根据题主对问题的描述&#xff0c;题主需要的答案也许是关于 while 循环结构&#xff0c;Continue 和 Break 的详细解释。了解了循环的控制后&#xff0c;题主便能很清楚地明白自己需要如何控制循环来达到想要的答案了。 先上干货&#xff1a; 1、while循环 如图所示&#xff0…

BCVP开发者说第3期:Adnc

沉静岁月&#xff0c;淡忘流年1项目简介AdncAdnc是一个轻量级的.NetCore微服务快速开发框架&#xff0c;同时也可以应用于单体架构系统的开发。框架基于JWT认证授权、集成了一系列微服务配套组件&#xff0c;代码简洁、易上手、学习成本低、开箱即用。    框架前端基于Vue、…

数据结构——二叉树的非递归算法

二叉树的非递归算法 先序遍历非递归算法1 先序遍历非递归算法2 非递归交换左右孩子算法 使用栈来实现二叉树的非递归算法 栈的基本算法 #include<stdio.h> #include<bits/stdc.h> typedef int Status; #define OK 1 #define ERROR 0 #define TRUE 1 #define …

signature=fc89d4352b6699754c14ce282ec75426,Method for Assembly of Nucleic Acid Sequence Data

摘要&#xff1a;The present invention relates to a method for assembly of nucleic acid sequence data comprising nucleic acid fragment reads into (a) contiguous nucleotide sequence segment(s), comprising the steps of: (a) obtaining a plurality of nucleic ac…

python字符串的表示_Python字符串方法总结

Python字符串方法图示&#xff1a; &#xff08;温馨提示&#xff1a;对图片点右键——在新标签页中打开图片&#xff09;1、index() 定义&#xff1a;查找并返回指定str的索引位置&#xff0c;如果没找到则会抛异常&#xff08;查找的顺序是从左至右&#xff09;可以指定范围&…

Kuma 1.0 GA发布,70多项新功能和改进

喜欢就关注我们吧&#xff01;Kuma 1.0 GA 现已发布&#xff0c;包含了 70 多种新功能和改进。Kuma 是一个现代的通用服务网格控制平面&#xff0c;基于 Envoy 搭建&#xff0c;Envoy 是一个为云原生应用设计的强大的代理软件。Kuma 高效的数据平面和先进的控制平面&#xff0c…

html圆点边框代码,HTML边框代码模板1

都说女人是男人的肋骨蜕变而来&#xff0c;是男人的心肝.可那一朵一朵微微卷起的发梢&#xff0c;点朱唇&#xff0c;纤细白皙的手指&#xff0c;踩着男人心底高跟鞋的我并不是他美丽的天使&#xff0c;往事在耳边环绕&#xff0c;现在的他人在那里&#xff0c;我不闻不问&…

递归函数斐波那契数列python_使用Python函数递归实现斐波那契数列时为什么运行速度很慢?...

你看看你递归代码的复杂度 是O(2^n) 而第二个的复杂度是O(n) 运行效率当然不同 COUNTER 0 def fibn(n): global COUNTER COUNTER 1 if n 0: return 1 elif n 1: return 1 else: return fibn(n-1) fibn(n-2) statistics [] for i in range(35): COUNTER 0 fibn(i 1) sta…

还在犹豫是否迁移.NET5?这几个项目已经上线了!

.NET5正式发布有十多天&#xff0c;博客园、知乎、技术群都讨论的非常热烈。关于项目是否迁移.NET5的话题讨论的尤为热烈&#xff0c;作为.NET十年老司机要告诉你&#xff0c;.NET5的迁移势在必行&#xff0c;当下就是最好的时机&#xff01;犹豫项目是否升级到.NET5的&#xf…

Android切换泰语,Android应用内切换语言

首先扯点别的&#xff1a;这是第一次在简书上写东西&#xff0c;我突然明白为啥这么多人在简书上写东西了&#xff0c;因为没有广告啊&#xff0c;哈哈。最近接触到Android 应用内切换语言的问题&#xff0c;研究了两天&#xff0c;做个记录先。实现了中文&#xff0c;英文&…

工程勘察设计收费标准2002修订版_黑龙江省哈尔滨新区智能轨道快运系统1号线项目勘察设计招标...

黑龙江省哈尔滨新区智能轨道快运系统1号线项目勘察设计第一标段招标公告招标编号&#xff1a;JTZGSJ20200011.招标条件本招标项目黑龙江省哈尔滨新区智能轨道快运系统1号线项目勘察设计已由上级部门批准建设&#xff0c;项目业主为哈尔滨交通集团有限公司&#xff0c;建设资金来…

从 3.1 到 5.0 —— OpenReservation 更新记

OpenReservation 从 asp.net core 3.1 到 5.0IntroOpenReservation 是一个开源的预约系统&#xff0c;最初的版本是我们学校的活动室预约系统&#xff0c;现在正逐步变成一个更为通用的预约系统。.NET5 发布之后也是把这个项目更新到了 5.0。这个项目是一个做了很长时间的项目&…